I have a list with events. I use a foreach for the array to retrieve the data. How my list looks like:
<article class="club-list-club">
<h2 class="club-list-title">
'.$club->getClubnaam().'
</h2>
<h2 class="club-list-location">
'.$club->getWoonplaats().'
</h2>
<h2 class="club-list-open-info">
Openingstijden
</h2>
<h2 class="club-list-big-info">
link2page
</h2>
<h2 class="club-list-small-info">
<span class="club-list-show-small-info">Show</span>
</h2>
<div class="more-info hide">
Hier wat informatie over de club zelf die kort word weergeven. je vind hier de openingstijden en alle
andere belangrijke info. Hier wat informatie over de club zelf die kort word weergeven. je vind hier de
openingstijden en alle andere belangrijke info.
</div>
</article>';
When the SPAN .club-list-show-small-info is clicked, i want the first div.more-info to toggle with fade or slide. What am i doing wrong in my code below:
<script type="text/javascript">
$(document).ready(function(){
$('.club-list-show-small-info').click(function(){
$(this).next('div').slideToggle('.hide');
});
});
</script>
The click event is bound to the span element, the div is not its next sibling element, the div is the next sibling of the spans parent h2 element. So
$(document).ready(function () {
$('.club-list-show-small-info').click(function () {
$(this).parent().next('div').slideToggle();
});
});
Demo: Fiddle
It should be:
$('.club-list-show-small-info').click(function(){
$(this).parent().next().slideToggle();
});
Since the info you want to show and hide is the next() sibling of .club-list-small-info which is the parent() of your .club-list-show-small-info span
Demo
If you want to have fade effect, you can use fadeToggle():
$('.club-list-show-small-info').click(function(){
$(this).parent().next().fadeToggle();
});
Demo
Related
got a question about js. Wanted to add a 'finish' button to my textadventure. The js function I have included externally. Now the problem is that i have different html documents, if i open and close a html document by pressing the button it works. But if I go through from the start document to the last html document, the button doesn't work. 😂
Do you have any idea?
Here is my close
function windowClose() {
window.open('', '_parent', '');
window.close();
}
Your close is not supposed to work on any browser anymore. It is a hack. If you managed to close my browser (and therefore kill my history) I would be quite annoyed.
Your pages are so short, you can have all of them in one page and just show/hide each path. You can even ajax them into a popped div and just hide the div when ending
For example like this
The example only loads start and WegAA1.html, look at the new source of the sub pages - for example WegAA1.html
Note I moved the buttons into the text div and added
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
to start.html
$(function() {
$(document).on("click", ".btn", function(e) {
e.preventDefault(); // stop possible submission
const $div = $("#text");
let pageURL = $(this).data("href"); // the string in the data-href attribute of the button
$div.fadeOut("slow", function() {
$div.load(pageURL+" #text", function() {
$div.fadeIn("slow")
});
});
});
});
...
<!--Teile des Dokuments definieren -->
<div id="text"> Claudette geht mit ihrem Hund Nachts spazieren. Es ist Wochenende und sie hat im Moment nichts besseres zu tun, da sie viel Druck von der Schule hat und sie dadurch derzeit keinen Kopf für andere Sachen hat. Darauf hin schreibt sie William an, er ist
ein guter Freund auf den sie sich immer verlassen kann. Dieser ist zwar kein gutes Vorbild da er raucht, aber das hält ihn nicht davon ab ein guter Mensch zu sein. Glücklicherweise schreibt dieser innerhalb von 5 Minuten auch schon zurück. Er wohnt
nicht weit von Claudette weg und schlägt vor sie beim Spazieren gehen zu begleiten....
<div id="option-buttons" class="btn-grid">
<button class="btn" data-href="WegAA1.html">Versuchen diesen zu Reparieren </button>
<button class="btn" data-href="WegBB1.html">Erst einmal weiter suchen </button>
</div>
</div>
</div>
I have this code:
<p onclick="tmtm();" id="TextMobile" class="Text">>> Für weitere Informationen klicken sie bitte mit Rechtsklick auf den jeweiligen Mitarbeiter</p>
and if I try it with onload it don't work, but onclick work:
<p onload="tmtm();" id="TextMobile" class="Text">>> Für weitere Informationen klicken sie bitte mit Rechtsklick auf den jeweiligen Mitarbeiter</p>
Javascript:
function tmtm(){
document.getElementById("TextMobile").innerHTML = "Für weitere Informationen halten sie bitte den jeweiligen Mitarbeiter gedrückt";}
I tried different things ...
For example I moved onload from to , but it don't work too
Can anyone help me?
You cannot use onload attribute on a paragraph.
If you absolutely must, you can achieve similar results by using the code below (using jQuery)
Script:
$('#foo').ready(function(){
alert('paragraph loaded');
});
HTML:
<p id="foo">Sample Paragraph</p>
I want to make a certain text changable with 2 buttons. This is what I have right now, this works fine. (Don't mind the language, I'm dutch)
<button onclick="document.getElementById('chgtext').innerHTML='NU WORDT HET ENGELS';">English</button> Â <button onclick="document.getElementById('chgtext').innerHTML='Nu terug nederlands';">Nederlands</button>
<div id="chgtext">Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op (Of klik in de sidebar op het<font color="white">-</font><i class="fa fa-envelope"></i><font color="white">-</font>icoontje onder <em>social </em>)</div>
What I would like to do, is to put images and < font style,.... into the changing text. But I can't. I have already tried doing it with \' but it doesn't work either. This is another code I have, It works fine on the code snippet, but it does not work on my blog:
<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. <img src=\'http://lorempixel.com/output/nightlife-q-c-50-50-6.jpg\'> with image <span style=\'color :red;\'>and color</span>';">English</button> Â <button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another <span style=\'color :red;\'>language</span>';">Nederlands</button>
<div id="chgtext">This is the default text. </div>
this is what I get --> http://oihanevalbuenaredondo.be/2017/02/03/test-2/
The end result I need is this:
<button onclick="document.getElementById('chgtext').innerHTML='NU WORDT HET ENGELS';">English</button> Â <button onclick="document.getElementById('chgtext').innerHTML='Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op info#rosalea.be (Of klik in de sidebar op het<font color="white">-</font><i class="fa fa-envelope"></i><font color="white">-</font>icoontje onder <em>social </em>)';">Nederlands</button>
<div id="chgtext">Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op info#rosalea.be (Of klik in de sidebar op het<font color="white">-</font><i class="fa fa-envelope"></i><font color="white">-</font>icoontje onder <em>social </em>)</div>
But ofcourse that is not possible, How could I make this possible? (I don't have 2 text insert boxes for HTML AND CSS, I only have 1 box to put code in when creating a wordpress blog post
You may have had issues with Escaping the quotes
for example when setting values in javascript you can use either single or double quotes
someVar = "a value"; // this works fine
someVar = 'a value';// this works too
someVar = "a value that's an issue";// will work
someVar = 'a value that's an issue';// but this one breaks
to solve that issue you can use a \ to escape it like this
someVar = 'a value that\'s an issue';// now it works
I added your language as a data- attribute but could be done a s a class or even reading the button text itself if you wanted to.
I also separated your javascript into a document ready block that will keep all of your script logic separate from your display and make editing easier later (best practices) .
One resource that you will find incredible useful is the jQuery API
Sometime WYSIWYG editors strip script and reformat some Quotes. you may have to change some settings in WP to accommodate your script elements inside of a post
<script>
$(document).ready(function() {
$('.btn').on('click', function(e) {
output = '';
switch ($(this).data('lang')) {
case 'English':
output = 'This is the default text.'+
'<img src=\'http://lorempixel.com/output/nightlife-q-c-50-50-6.jpg\'> with image <span class=\'red\'>and color</span><p>Do you have a question, an idea for a post you\'d like to see on my blog, or any other reason you want to contact me. please send me email at info#rosalea.be (Or, in the sidebar on the - icon under social)</p>';
break;
case 'Nederlands':
output = 'Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op info#rosalea.be (Of klik in de sidebar op het<span class="white">-</span><i class="fa fa-envelope"></i><span class="white">-</span>icoontje onder <em>social </em>)';
break;
default:
output = 'This is the default text.';
}
$('#chgtext').html(output);
})
})
</script>
<div>
<button class="btn" data-lang="English">English</button>
<button class="btn" data-lang="Nederlands">Nederlands</button></div>
<div id="chgtext">This is the default text.</div>
/* add these lines to your css file if you want */
.white{
color:white;
}
.red{
color:red;
}
/*these should be in your framework already */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I want replace a div 'mainbox' that exist in html page 'index.html' with this that exist in html page 'list-div':
<body>
<div id="divet">
Sempre caro mi fu quest'ermo colle,
e questa siepe che da tanta parte dell'ultimo orizzonte
il guardo esclude
</div>
</body>
I did:
$(document).ready(function(){
$('#mainbox').load('list-div.html #hey');
});
but it don't run.
Help me please.
HTML
<div id="divet">
Sempre caro mi fu quest'ermo colle,
e questa siepe che da tanta parte dell'ultimo orizzonte
il guardo esclude
</div>
jQuery
$(document).ready(function(){
$('#mainbox').load('list-div.html #divet');
});
Your #hey id is not found, replace this with #divet
Try this way:
$(document).ready(function(){
var tempDom = $('<div></div>'); //create an element to store html
$('div', tempDom).load('list-div.html', function(){ //load page content
$('#mainbox').html($('#divet', tempDom).html()); //copy html content to mainbox element
});
});
I'm having trouble opening a popup to share on facebook.
When I press the "button" popup opens correctly, but back in the page from where I called it also shows the contents of that url.
I tried leaving blank href, also with #, but none get a good result.
This is the code:
<a href="http://www.facebook.com/sharer.php?s=100&p[url]=http://www.misbooks.com.ar/titulo.php?id=3304&p[title]=Juego de tronos&p[summary]=Tras el largo verano, el invierno se acerca a los Siete Reinos. Lord Eddars Stark, señor de Invernalia, deja sus dominios para unirse a la corte del rey Robert Baratheon el Usurpador, hombre dÃscolo y otrora guerrero audaz cuyas mayores aficiones son comer, beber y engendrar bastardos. Eddard...&p[images][0]=http://www.misbooks.com.ar/img/portadas/3304.jpg" onclick="window.open(this.href, 'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=626,height=436')">
<i class="pluginButtonIcon img sp_like sx_like_fav alignButtonImage"></i>
<span class="accessible_elem alignButtonImage">Compartir</span>
</a>
Someone can help me?
Thanks.
Just add return false; to your onclick function:
onclick="window.open(this.getAttribute('_url'), 'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=626,height=436'); return false;"
Well, you can try this:
<a href="" _url="http://stackoverflow.com" onclick="window.open(this.getAttribute('_url'), 'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=626,height=436')">
<i class="pluginButtonIcon img sp_like sx_like_fav alignButtonImage"></i>
<span class="accessible_elem alignButtonImage">Compartir</span>
</a>