Probleme mit js einfügen

Antworten
#1
19.04.2018 10:04
avatar  kvdnk
#1
kv
kvdnk

Hallo,

Ich möchte gerne von Medium Posts auf meiner Webseite einfügen. Es sollte so aussehen: https://codepen.io/jasonm4130/pen/vZYbQx

Jedoch zeigt es bei mir nur den HTML text an, keine Blog posts. Ich habe es folgendermassen gemacht: Html code in ein widget einfügt, den css code in den head eingefügt und den js code auch in ein widget eingefügt auf der selben Seite. Ich habe dann noch ausgetestet den html und js in das gleiche widget einzufügen was aber auch nicht geklappt habt. Ich bin sehr froh um eure Hilfe. Kenne mich leider nur in den Basics aus. Habe erst vor 3 Monaten angefangen mit webdesign Kursen.

Vielen Dank


 Antworten

 Beitrag melden
#2
19.04.2018 14:55
avatar  TiJo
#2
Ti
TiJo

zeig doch mal was du genau eingefügt hast.


 Antworten

 Beitrag melden
#3
20.04.2018 00:46
avatar  kvdnk
#3
kv
kvdnk

Das ist der html code diesen habe ich in ein widget eingefügt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!-- Blog-->
 
<section class="section blog" id="blog">
    <div class="container">
        <!---->
 
        <header class="section-heading">
            <h2>
                From The Blog
            </h2>
            <span>Awesome articles from the blog</span>
        </header>
        <!---->
 
        <div class="section-content" id="blogContent">
            <div class="row" id="jsonContent">
            </div>
        </div>
        <!-- /#blogContent-->
 
        <div class="text-center">
            <a class="btn btn-dark" id="loadBlogPosts" href="//medium.jasonmdesign.com" name="loadBlogPosts">View All</a>
        </div>
    </div>
    <!-- /.container-->
</section>
<!-- Blog-->
 



Dann habe ich js auch in ein widget eingefügt, nämlich so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<script>
/* <![CDATA[ */
    $(function () {
        var $content = $('#jsonContent');
        var data = {
                rss_url: 'https://medium.jasonmdesign.com/feed'
        };
        $.get('https://api.rss2json.com/v1/api.json', data, function (response) {
                if (response.status == 'ok') {
                        var output = '';
                        $.each(response.items, function (k, item) {
                                var visibleSm;
                                if(k < 3){
                                        visibleSm = '';
                                 } else {
                                         visibleSm = ' visible-sm';
                                 }
                                output += '<div class="col-sm-6 col-md-4' + visibleSm + '">';
                                output += '<div class="blog-post"><header>';
                                output += '<h4 class="date">' + $.format.date(item.pubDate, "dd<br>MMM") + "<\/h4>";
                                var tagIndex = item.description.indexOf('<img'); // Find where the img tag starts
                                var srcIndex = item.description.substring(tagIndex).indexOf('src=') + tagIndex; // Find where the src attribute starts
                                var srcStart = srcIndex + 5; // Find where the actual image URL starts; 5 for the length of 'src="'
                                var srcEnd = item.description.substring(srcStart).indexOf('"') + srcStart; // Find where the URL ends
                                var src = item.description.substring(srcStart, srcEnd); // Extract just the URL
                                output += '<div class="blog-element"><img class="img-responsive" src="' + src + '" width="360px" height="240px"><\/div><\/header>';
                                output += '<div class="blog-content"><h4><a href="'+ item.link + '">' + item.title + '<\/a><\/h4>';
                                output += '<div class="post-meta"><span>By ' + item.author + '<\/span><\/div>';
                                var yourString = item.description.replace(/<img[^>]*>/g,""); //replace with your string.
                                var maxLength = 120 // maximum number of characters to extract
                                //trim the string to the maximum length
                                var trimmedString = yourString.substr(0, maxLength);
                                //re-trim if we are in the middle of a word
                                trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))
                                output += '<p>' + trimmedString + '...<\/p>';
                                output += '<\/div><\/div><\/div>';
                                return k < 3;
                        });
                        $content.html(output);
                }
        });
});
    
/*]]>*/
</script>
 



und in den head habe ich noch css eingefügt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
 

<style>
/* <![CDATA[ */
    @charset "UTF-8";
.blog .blog-post {
  margin-bottom: 40px;
}
.blog .blog-post header {
  position: relative;
}
.blog .blog-post header .date {
  background-color: #fdfdfd;
  position: absolute;
  padding: 10px;
  text-align: center;
  font-weight: 500;
  z-index: 9;
  color: #2c2c2c;
}
.blog .blog-post .blog-content {
  padding: 15px 28px;
  border: 1px solid #f5f5f5;
}
.blog .blog-post .blog-content h4 {
  margin: 20px 0;
  letter-spacing: 1px;
}
.blog .blog-post .blog-content h4 a {
  color: #333;
}
.blog .blog-post .blog-content .post-meta {
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 10px;
  font-size: 12px;
  border-bottom: 1px solid #F5F5F5;
}
.blog .blog-post .blog-content .post-meta span {
  color: #CCC;
}
.blog .blog-post .blog-content .post-meta span:first-child a {
  color: #848484;
}
.blog .blog-post .blog-content .post-meta span a {
  color: #CCC;
  border-bottom: 1px rgba(0, 0, 0, 0);
}
.blog .blog-post .blog-content .post-meta span a:hover {
  text-decoration: none;
  border-bottom-style: solid;
  border-color: inherit;
}
.blog .blog-post .blog-content .post-meta span {
  padding-right: 10px;
  border-right: 1px solid #CCC;
  margin-right: 10px;
}
.blog .blog-post .blog-content .post-meta span:last-child {
  margin-right: 0;
  border-right: 0;
  padding-right: 0;
}
.blog .blog-post .blog-content p {
  color: #67666a;
  line-height: 22px;
}
.blog .blog-post footer {
  border: 1px solid #DDD;
  padding: 0px 15px;
}
.blog .blog-post footer .comment-count {
  color: #000;
  position: relative;
  padding-left: 25px;
}
.blog .blog-post footer .comment-count:hover,
.blog .blog-post footer .comment-count:focus {
  color: #000;
}
.blog .blog-post footer .read-more {
  color: #000;
  position: relative;
  padding-left: 25px;
  padding-right: 0;
  text-transform: uppercase;
}
.blog .blog-post footer .read-more:hover,
.blog .blog-post footer .read-more:focus {
  color: #000;
}
 
@media (min-width: 768px) {
  .blog .blog-post header .image-slider-carousel .carousel-control.left {
    top: 200px;
    bottom: 5px;
    left: 220px;
  }
  .blog .blog-post header .image-slider-carousel .carousel-control.right {
    top: 200px;
  }
}
@media (min-width: 992px) {
  .blog .blog-post header .image-slider-carousel .carousel-control.left {
    top: 210px;
    bottom: 5px;
    left: 235px;
  }
  .blog .blog-post header .image-slider-carousel .carousel-control.right {
    top: 210px;
    right: 10px;
    bottom: 5px;
  }
}
.blog-standard .blog-post {
  margin-bottom: 80px;
}
.blog-standard .blog-post:last-child {
  margin-bottom: 0;
}
.blog-standard .blog-post .featured-image {
  margin-bottom: 30px;
}
.blog-standard .blog-post .post-title {
  margin-bottom: 15px;
}
.blog-standard .blog-post .post-title > a {
  color: #5c5c5c;
}
.blog-standard .blog-post .post-title > a:hover {
  color: #000000;
  text-decoration: none;
}
.blog-standard .blog-post .post-meta {
  color: silver;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 30px;
}
.blog-standard .blog-post .post-meta a {
  color: #656565;
}
.blog-standard .blog-post .post-meta span {
  margin: 0 6px;
}
.blog-standard .blog-post .read-more {
  margin-top: 25px;
}
.blog-standard .blog-post .read-more a {
  text-transform: uppercase;
  color: black;
  transition: all 0.2s;
}
.blog-standard .blog-post .read-more a:hover {
  color: silver;
  text-decoration: none;
}
 
/*overriding bootstrap's default pagination */
.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
 
.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
 
.pagination > li {
  display: inline-block;
  margin-right: 8px;
}
 
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
  background-color: black;
  border-color: black;
}
 
.pagination > li > a, .pagination > li > span {
  color: #909090;
}
 
.sidebar {
  padding: 0 0 0 30px;
}
.sidebar .widget {
  margin-bottom: 60px;
}
.sidebar .widget.popular-posts .widget-content ul {
  padding: 15px 0 0 0;
  list-style: none;
  color: #b0b0b0;
}
.sidebar .widget.popular-posts .widget-content ul li {
  margin-bottom: 30px;
}
.sidebar .widget.popular-posts .widget-content ul .thumb {
  margin-right: 10px;
  margin-top: -10px;
}
.sidebar .widget.popular-posts .widget-content ul .title {
  color: gray;
}
.sidebar .widget.popular-tags a {
  margin-bottom: 6px;
}
.sidebar .widget.categories ul {
  list-style: none;
  padding: 0;
}
.sidebar .widget.categories ul li {
  line-height: 3em;
}
.sidebar .widget.categories ul li:before {
  content: "&#61697;";
  font: normal normal normal 14px/1 FontAwesome;
  margin-right: 15px;
}
.sidebar .widget.categories ul li a {
  color: black;
}
.sidebar .widget.categories ul li a:hover {
  color: gray;
}
 
.left-sidebar .sidebar {
  padding: 0 30px 0 0;
}
 
.blog-grid .blog-element {
  max-height: 290px;
  overflow: hidden;
}
.blog-grid .blog-element img {
  width: 100%;
}
 
/*]]>*/
</style>
 

 




Weisst du vielleicht an was es liegen könnte?

Bildanhänge

 Antworten

 Beitrag melden
#4
20.04.2018 12:07
avatar  TiJo
#4
Ti
TiJo

versuch mal am Anfang vom JS Part

1
 
<script src="https://code.jquery.com/jquery-latest.js"></script>
 

einzufügen.


 Antworten

 Beitrag melden
#5
20.04.2018 13:14
avatar  kvdnk
#5
kv
kvdnk

Ich habs probiert leider hat dies nicht geklappt...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<script src="https://code.jquery.com/jquery-latest.js">
/* <![CDATA[ */
    $(function () {
        var $content = $('#jsonContent');
        var data = {
                rss_url: 'https://medium.jasonmdesign.com/feed'
        };
        $.get('https://api.rss2json.com/v1/api.json', data, function (response) {
                if (response.status == 'ok') {
                        var output = '';
                        $.each(response.items, function (k, item) {
                                var visibleSm;
                                if(k < 3){
                                        visibleSm = '';
                                 } else {
                                         visibleSm = ' visible-sm';
                                 }
                                output += '<div class="col-sm-6 col-md-4' + visibleSm + '">';
                                output += '<div class="blog-post"><header>';
                                output += '<h4 class="date">' + $.format.date(item.pubDate, "dd<br>MMM") + "<\/h4>";
                                var tagIndex = item.description.indexOf('<img'); // Find where the img tag starts
                                var srcIndex = item.description.substring(tagIndex).indexOf('src=') + tagIndex; // Find where the src attribute starts
                                var srcStart = srcIndex + 5; // Find where the actual image URL starts; 5 for the length of 'src="'
                                var srcEnd = item.description.substring(srcStart).indexOf('"') + srcStart; // Find where the URL ends
                                var src = item.description.substring(srcStart, srcEnd); // Extract just the URL
                                output += '<div class="blog-element"><img class="img-responsive" src="' + src + '" width="360px" height="240px"><\/div><\/header>';
                                output += '<div class="blog-content"><h4><a href="'+ item.link + '">' + item.title + '<\/a><\/h4>';
                                output += '<div class="post-meta"><span>By ' + item.author + '<\/span><\/div>';
                                var yourString = item.description.replace(/<img[^>]*>/g,""); //replace with your string.
                                var maxLength = 120 // maximum number of characters to extract
                                //trim the string to the maximum length
                                var trimmedString = yourString.substr(0, maxLength);
                                //re-trim if we are in the middle of a word
                                trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))
                                output += '<p>' + trimmedString + '...<\/p>';
                                output += '<\/div><\/div><\/div>';
                                return k < 3;
                        });
                        $content.html(output);
                }
        });
});
    
/*]]>*/
</script>
 





Hast du noch weitere Vorschläge an was es liegen könnte? Wäre wirklich sehr froh.


 Antworten

 Beitrag melden
#6
21.04.2018 23:08
avatar  kvdnk
#6
kv
kvdnk

Kennt jemand von euch ein gutes Portal wo man Jimdo Entwickler fragen kann? Ich bin schon seit Tagen an diesem Problem dran und weiss einfach nicht an was es liegen könnte.


 Antworten

 Beitrag melden
#7
25.04.2018 21:54
avatar  kvdnk
#7
kv
kvdnk

Ich habe immer noch keine Lösung gefunden. Kennt Ihr jemanden der mir weiterhelfen könnte oder vielleicht ein anderes Jimdo Forum?


 Antworten

 Beitrag melden
#8
26.04.2018 15:25
avatar  az_
#8
avatar
az_

1
 
<script src="https://code.jquery.com/jquery-latest.js"></script>
 

...musst Du extra schreiben.

Darunter kommt dann Dein Script:

1
2
3
4
5
6
7
8
9
10
 
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
 
<script type="text/javascript">
//<![CDATA[
        $(function() {
               //your code here...
 
        });
//]]>
</script>
 



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#9
28.04.2018 19:09
avatar  kvdnk
#9
kv
kvdnk

Danke für die Rückmeldung. Leider funktioniert es nicht. Weiss nicht ob es einfach an Jimdo liegt das es nicht geht.


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!