Probleme mit js einfügen

Jimdo-Userforum � Jimdo User-Forum � Jimdo-Specials (Tools, Widgets, HTML und CSS) � Probleme mit js einfügen

Themen-Einstellungen

Bereich wechseln

Allgemeines Regeln f�r die Benutzung des Forums HowToDo ( = so geht�s) Jimdo User-Forum Eure Jimdo-Webseiten - Vorstellungsrunde Bugs, Workarounds und Anregungen Jimdo-Elemente Allgemeines Jimdo-Shop Jimdo-Specials (Tools, Widgets, HTML und CSS) Suchmaschinenoptimierung (SEO) Sonstiges Tutorials "OffTopic"-Themen "�bernahme" von Beitr�gen aus dem offiziellen Jimdo-Forum... Nutzungsbedingungen und Haftungsausschluss Jimdo-Blog

#1 | Probleme mit js einfügen datum

19.04.2018 10:04

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

#2 | RE: Probleme mit js einfügen datum

19.04.2018 14:55

zeig doch mal was du genau eingefügt hast.

Antworten

#3 | RE: Probleme mit js einfügen datum

20.04.2018 00:46

kvdnk

Informationen anzeigen

Beitr�ge:	15
Registriert seit:	18.04.2018

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?

kvdnk hat folgende Bilder an diesen Beitrag angeh�ngt

fehler.PNG

Antworten

#4 | RE: Probleme mit js einfügen datum

20.04.2018 12:07

TiJo

Informationen anzeigen

Beitr�ge:	203
Registriert seit:	14.10.2017

versuch mal am Anfang vom JS Part

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

einzufügen.

Antworten

#5 | RE: Probleme mit js einfügen datum

20.04.2018 13:14

kvdnk

Informationen anzeigen

Beitr�ge:	15
Registriert seit:	18.04.2018

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

#6 | RE: Probleme mit js einfügen datum

21.04.2018 23:08

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

#7 | RE: Probleme mit js einfügen datum

25.04.2018 21:54

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

Antworten

#8 | RE: Probleme mit js einfügen datum

26.04.2018 15:25

az_

Informationen anzeigen

Beitr�ge:	2403
Registriert seit:	28.04.2015
Wohnort:	Berlin

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 immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

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

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

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#9 | RE: Probleme mit js einfügen datum

28.04.2018 19:09

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

Antworten

Formatierung persönliche Datenschutzerklärung � � Widget Forum

�hnliche Themen

Antworten

Letzter Beitrag

Probleme mit Mailbox und zweiter Website
Erstellt im Forum Bugs, Workarounds und Anregungen von David 1 27.03.2024 09:49
az_ • Zugriffe: 201
Weiterleitungen - Probleme DKIM und DMARC?
Erstellt im Forum Bugs, Workarounds und Anregungen von jimdonutzer 0 01.02.2024 12:54
jimdonutzer • Zugriffe: 411
Umstellung auf Design Rome führt zu Problemen
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Lissycat 7 28.11.2023 18:49
Higgie • Zugriffe: 1451
HTML-Probleme
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von PhoenixS 1 28.12.2018 09:50
az_ • Zugriffe: 1008
Probleme bei der Umsetzung eines Count-Ups
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Kersten 4 17.04.2018 12:38
Kersten • Zugriffe: 746
Neue Anmeldeverfahren..... seit dem Probleme
Erstellt im Forum "OffTopic"-Themen von Gina 1 09.12.2017 18:48
az_ • Zugriffe: 1383
Probleme mit Forums-Einbindung (Xobor)
Erstellt im Forum Bugs, Workarounds und Anregungen von Darvida 1 03.06.2017 03:36
az_ • Zugriffe: 1392
Probleme bei Hochladen von pdf Datei
Erstellt im Forum Jimdo-Elemente von Cookie 2 12.02.2017 10:57
Cookie • Zugriffe: 1618
Schriftdarstellungs-Probleme
Erstellt im Forum Bugs, Workarounds und Anregungen von BerlinDampft 8 15.01.2016 12:23
BerlinDampft • Zugriffe: 836

Xobor-Forum f�r Jimdo-Creator User

Bitte geben Sie einen Grund f�r die Verwarnung an