I need to add a favorite button on a menu website. If the meal is favorited, it needs to be visual on the 'favorieten' button. I need to use HTML and JavaScript. The code is in Dutch, please don't worry about the names. I fixed the checkboxes on the top but I cannot get the 'hartje' (this means: heart) to respond properly and ad it to the 'Favorieten' button. Can someone help me?
This is my code:
const checkboxes = document.getElementsByTagName("input")
let actieve_types = []
for (let x = 0; x < checkboxes.length; x++) {
const checkbox = checkboxes[x]
checkbox.addEventListener("change", e => {
if (actieve_types.includes(checkbox.value)) {
const index_value = actieve_types.indexOf(checkbox.value)
actieve_types.splice(index_value, 1)
} else {
actieve_types.push(checkbox.value)
}
updateView()
})
}
const updateView = () => {
const meals = document.getElementsByClassName("meal")
for (let x = 0; x < meals.length; x++) {
const meal = meals[x]
meal.style.display = "block"
if (actieve_types.length > 0) {
if (!actieve_types.includes(meal.dataset.type)) {
meal.style.display = "none"
}
}
}
}
document.getElementsByClassName("hartje");.onclick = function(event) {
for (var i = 0; i < faveMe.length; i++) {
if (faveMe[i].className === "hartje") {
faveMe[i].classList.replace("hartje", "welFavo");
console.log(faveMe);
} else {
faveMe[i].style.visibility = "";
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/Menukaart_wk5/css/master.css">
<script src="/Menukaart_wk5/js/main.js" charset="UTF-8" defer></script>
<title>Yes!BosFood!</title>
</head>
<body>
<main>
<section>
<header>
<h1>Yes!BosFood</h1>
</header>
<ul class="filterSection">
<li>
<input type="checkbox" name="checkbox" value="alleen">
<label>Ik eet alleen |</label>
</li>
<li>
<input type="checkbox" name="checkbox" value="groot">
<label>Ik wil een groot gerecht |</label>
</li>
<li>
<input type="checkbox" name="checkbox" value="delen">
<label>Wij gaan delen</label>
</li>
</ul>
<div class="favo">
<input id="eventClick" type="button" value="Favorieten">
</div>
<article>
<ul id="itemsToFilter">
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_1.jpg" alt="Sushi close up"></figure>
<h2><strong>Sushi box | €14.50 </strong></h2>
<p>Keuze uit 3 grote sushisoorten en 4 kleine. Of laat je verassen door de keuze van de chef!</p>
<button class="hartje"></button>
</li>
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_2.jpg" alt="Vegetarische sushi"></figure>
<h2><strong>Sushi vegabox | €19.50</strong></h2>
<p>Keuze uit 3 grote sushisoorten en 4 kleine, zonder vis. Of laat je verassen door de keuze van de chef! </p>
<button class="hartje"></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_3.jpg" alt="Grote box met sushi"></figure>
<h2><strong>Sushi box groot | €29.95 </strong></h2>
<p>Keuze uit 7 grote sushisoorten en 8 kleine. Ideaal om te delen! </p>
<button class="hartje"></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/pasta_1.jpg" alt="Pasta tagliatelle"></figure>
<h2><strong>Pasta tagliatelle | €12.50 </strong></h2>
<p>Altijd lekker en dit gerecht is vegetarisch!</p>
<button class="hartje"></button>
</li>
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/champ_soep.jpg" alt="Champignonsoep"></figure>
<h2><strong>Champignonsoep | €8.50 </strong></h2>
<p>Heerlijk als voorgerecht en dit gerecht is vegetarisch!</p>
<button class="hartje"></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/gnocchi.jpg" alt="Gnocchi"></figure>
<h2><strong>Gnocchi | €11.50</strong></h2>
<p>Te bestellen als vega gerecht, of met vlees!</p>
<button class="hartje"></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/ei_in_saus.jpg" alt="Shakshuka"></figure>
<h2><strong>Shakshuka | vanaf €8.50 </strong></h2>
<p>Heerlijk om mee te dippen. Kies je eigen dipsoort!</p>
<button class="hartje"></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/pizza.jpg" alt="Pizza"></figure>
<h2><strong>Pizza | vanaf €11.50 </strong></h2>
<p>Stel jouw eigen pizza samen!</p>
<button class="hartje"></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/patat.jpg" alt="Patat"></figure>
<h2><strong>Patat | vanaf €3.50 </strong></h2>
<p>Stel jouw eigen patatje samen! Ga jij voor de patat met of pak je uit met een patatje oorlog?</p>
<button class="hartje"></button>
</li>
</ul>
<footer>
<h2>Gemaakt door Simone Bos</h2>
</footer>
</article>
</section>
</main>
</body>
I would try the following: In your <ul> you can add icons to your buttons like this:
<ul id="itemsToFilter">
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_1.jpg" alt="Sushi close up"></figure>
<h2><strong>Sushi box | €14.50 </strong></h2>
<p>Keuze uit 3 grote sushisoorten en 4 kleine. Of laat je verassen door de keuze van de chef!</p>
<button class="hartje" onclick="favorizeMeal(0)"><i id="0" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_2.jpg" alt="Vegetarische sushi"></figure>
<h2><strong>Sushi vegabox | €19.50</strong></h2>
<p>Keuze uit 3 grote sushisoorten en 4 kleine, zonder vis. Of laat je verassen door de keuze van de chef! </p>
<button class="hartje" onclick="favorizeMeal(1)"><i id="1" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/sushi_3.jpg" alt="Grote box met sushi"></figure>
<h2><strong>Sushi box groot | €29.95 </strong></h2>
<p>Keuze uit 7 grote sushisoorten en 8 kleine. Ideaal om te delen! </p>
<button class="hartje" onclick="favorizeMeal(2)"><i id="2" class="fa fa-heart"></i></i></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/pasta_1.jpg" alt="Pasta tagliatelle"></figure>
<h2><strong>Pasta tagliatelle | €12.50 </strong></h2>
<p>Altijd lekker en dit gerecht is vegetarisch!</p>
<button class="hartje" onclick="favorizeMeal(3)"><i id="3" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="alleen" class="meal">
<figure><img src="/Menukaart_wk5/image/champ_soep.jpg" alt="Champignonsoep"></figure>
<h2><strong>Champignonsoep | €8.50 </strong></h2>
<p>Heerlijk als voorgerecht en dit gerecht is vegetarisch!</p>
<button class="hartje" onclick="favorizeMeal(4)"><i id="4" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/gnocchi.jpg" alt="Gnocchi"></figure>
<h2><strong>Gnocchi | €11.50</strong></h2>
<p>Te bestellen als vega gerecht, of met vlees!</p>
<button class="hartje" onclick="favorizeMeal(5)"><i id="5" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/ei_in_saus.jpg" alt="Shakshuka"></figure>
<h2><strong>Shakshuka | vanaf €8.50 </strong></h2>
<p>Heerlijk om mee te dippen. Kies je eigen dipsoort!</p>
<button class="hartje" onclick="favorizeMeal(6)"><i id="6" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="delen" class="meal">
<figure><img src="/Menukaart_wk5/image/pizza.jpg" alt="Pizza"></figure>
<h2><strong>Pizza | vanaf €11.50 </strong></h2>
<p>Stel jouw eigen pizza samen!</p>
<button class="hartje" onclick="favorizeMeal(7)"><i id="7" class="fa fa-heart-o"></i></i></button>
</li>
<li data-type="groot" class="meal">
<figure><img src="/Menukaart_wk5/image/patat.jpg" alt="Patat"></figure>
<h2><strong>Patat | vanaf €3.50 </strong></h2>
<p>Stel jouw eigen patatje samen! Ga jij voor de patat met of pak je uit met een patatje oorlog?</p>
<button class="hartje" onclick="favorizeMeal(8)"><i id="8" class="fa fa-heart-o"></i></i></button>
</li>
</ul>
For the icons to show up you need to add this link to the icon library I used in the head section of your html:
<head>
...
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
There are more icon libraries, find a tutorial here: https://www.w3schools.com/icons/default.asp
Then you need to implement a logic in your Javascript that exchanges the icon class 'fa-heart' with 'fa-heart-o' if the user clicked on the button.
favorizeMeal(mealNumber) {
console.log("favorizeMeal clicked for meal number: ", mealNumber);
var selectedIcon = document.getElementById(mealNumber);
if (selectedIcon.classList.contains('fa-heart') {
selectedIcon.classList.remove("fa-heart");
selectedIcon.classList.add("fa-heart-o");
} else {
selectedIcon.classList.add("fa-heart");
selectedIcon.classList.remove("fa-heart-o");
}
}
Something like this (I didn't test it though!)
Related
On a specific webpage, https://www.aeternus.org/try/, in order to publish some quotes in the Dutch (NL) language, I have installed a vertical scroll marquee script. In the first tab, this script is working fine and does its job very well.
Major issue: When I try to install the same script (but with different quotes in other languages (EN, DE, FR) for the 2nd, 3rd and 4th tab as well. they don't work and the script in the first tab, stops working as well.
I assume that with each tab-switch:
-- I have to "stop" the already active script in the "old" tab,
-- and to "start" the script in the "new" tab.
The code I am using sofar, is the following:
<style>
#charset "UTF-8";
.tab-menu {
list-style-type: none;
overflow: hidden;
margin: 2.5em 0 0 0;
padding: 0;
}
.tab-menu li {
display: inline;
float: left;
}
.tab-menu li a {
display: block;
padding: 10px 18px;
border-top: 1px solid #198219;
border-left: 1px solid #198219;
border-right: 1px solid #198219;
color: #ffffff;
background-color: #198219;
text-decoration: none;
}
.tab-menu li a:hover {
background-color: #208c20;
}
.tab-menu li.active a {
color: #222222;
background-color: #f5f5f5;
border-top: 1px solid #ccf;
border-left: 1px solid #ccf;
border-right: 1px solid #ccf;
}
.tab-menu li.active a:hover {
color: #222222;
background-color: #f5f5f5;
text-decoration: none;
cursor: default;
}
.tab-content {
position: relative;
width: 100%;
min-height: 180px;
max-height: 380px;
overflow: auto;
margin-bottom: 2.5em;
padding: 20px;
border-left: 1px solid #ccf;
border-bottom: 1px solid #ccf;
background-color: #f5f5f5;
}
.tab-loading {
position: absolute;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
width: 32px;
height: 32px;
background-image: url(./ajax-loader.gif);
}
.fa-circle {
color: #4F81BD;
position: relative;
top: -0.20em;
}
#wrap{
margin: 0px auto;
}
.right {
float: right;
}
</style>
<script src="https://www.aeternus.org/linski_tabs/jquery.fwd_tabs.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://www.aeternus.org/linski_tabs/jquery.liMarquee.js"></script>
<link rel="stylesheet" href="https://www.aeternus.org/linski_tabs/liMarquee.css">
<!-- Initialization of plugin -->
<script>
$(window).on('load',function(){
$('.str4').liMarquee({
direction: 'top',
height:300,
width: '100%',
hoverStop: false,
scrollDelay: 230
});
})
$(function() { $(".tabs").fwd_tabs(); })
</script>
<div class="tabs">
<ul class="tab-menu">
<li>Quotes - NL</li>
<li>Quotes - EN</li>
<li>Quotes - DE</li>
<li>Quotes - FR</li>
</ul>
<div class="tab-content" id="tab-1">
<div class="str4 mWrap">
<!-- Start Your Code -->
<div class="contItem" id="wrap";>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Wees niet bang voor schaduwen, het betekent dat er ergens dichtbij licht is.</div>
<div class="right">Ruth Renkle</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Waarom moeilijk doen als het samen kan?</div>
<div class="right">Loesje</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Hij die anderen kent is geleerd. Hij die zichzelf kent, is wijs.</div>
<div class="right">Lao Tse</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Probeer eerst te begrijpen, dan pas begrepen te worden.</div>
<div class="right">Stephen Covey</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Zorg ervoor dat de stem van je hart luider is dan die van je ego.</div>
<div class="right">Chinees gezegde</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Er ontstaat geen harmonie als iedereen dezelfde noot zingt.</div>
<div class="right">Doug Floyd</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Hoewel iedereen uniek is, durft slechts een enkeling anders te zijn.</div>
<div class="right">Wouter Kloosterman</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Let's make the impossible possible as possible as soon as possible.</div>
<div class="right">Pierre Linssen</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Bij een overwinning op jezelf is er geen verliezer.</div>
<div class="right">Olaf Hoenson</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Vriendschap is liefde op het eerste woord.</div>
<div class="right">Harry Mulisch</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Mensen met vaststaande antwoorden zijn bang voor de vraag.</div>
<div class="right">Kees Tillema</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
De dichter is een beeldhouwer die muziek schildert.</div>
<div class="right">Clem Schouwenaars</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Wie de toekomst als tegenwind ervaart, loopt in de verkeerde richting.</div>
<div class="right">Robbert Nijenhuis</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Misschien is ‘misschien’ het juiste woord voor zeker.</div>
<div class="right">Marc van Halsendaele</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Groot worden doe je door klein te blijven.</div>
<div class="right">Eckart Wintzen</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
Het schijnt dat mensen die fouten durven maken ook veel creatiever zijn.</div>
<div class="right">Loesje</div><br><br>
<div style="float:left"> <i class="fa fa-circle" style="font-size:0.6em"></i>
De manier waarop we aandacht geven, maakt het verschil tussen au en wow.</div>
<div class="right"> Isaac Shapiro</div><br><br>
</div>
<!-- End Your Code -->
</div>
</div>
<div class="tab-content" id="tab-2">
<p>Also, the number of daily new infections appears to have stabilised. Although the health ministry has warned that weekend figures can be misleading because of a delay by local authorities in reporting data, the apparently improving picture will further encourage calls for the lifting of certain restrictions. There has been growing social and political pressure on Prime Minister Sánchez to allow children, in particular, to go outside. Opposition leader Pablo Casado tweeted that "these little heroes are climbing the walls" after more than a month of not being allowed out beyond the confines of their homes.</p>
</div>
<div class="tab-content" id="tab-3">
<p>Schnee besteht aus vielen kleinen Schneekristallen, die in einem Kristallgitter fest miteinander verbunden sind. Schneeflocken sind keine gefrorenen Wassertropfen, sondern bilden sich in einer Kette von physikalischen Prozessen. Die meist sechseckige Form der Schneekristalle erklärt sich aus der Kristall-gitter-Struktur der Wassermoleküle. Diese bilden, wenn es kalt genug ist, die typische Sternstruktur aus. Die genaue Form der Schneeflocken ist vor allem abhängig von der Temperatur und der Luftfeuchtigkeit bei der Entstehung.</p>
</div>
<div class="tab-content" id="tab-4">
<p>Il a toujours la même allure d’adolescent dégingandé aux pulls couleur pastel démodés et aux yeux qui sourient en permanence derrière des lunettes rondes. Mais avec sa fortune de 100 milliards de dollars, sa place de deuxième homme le plus riche du monde, son passé de PDG d’un des joyaux de l’industrie américaine du software, ses réseaux planétaires et la force de frappe de sa Fondation philanthropique dotée d’un fonds de 40 milliards, Bill Gates représente à lui tout seul une entreprise de «soft power» mondiale.</p>
</div>
</div>
I have prepared a codepen at: https://codepen.io/piotr-linski/pen/BaozEVZ
Minor issue: For unclear reason to me, in the codepen the tab-content of the other tabs is visible as well.
Any suggestions, especially how to solve the major issue are highly appreciated.
I managed to create an alternative solution to show different vertical marquees in several tabs. This alternative solution is based on:
- the following jquery tabs-script, check this link ...
- the following vertical marquee script, check this link ...
<style>
#marqueecontainer {
position: relative;
width: 100%; /*marquee width */
height: 300px; /*marquee height */
background-color: #F5F5F5;
overflow: hidden;
// border: 2px solid purple;
// padding: 2px;
margin-left: 3px;
padding-left: 0px;
// margin-top: -5px;
}
#vmarquee {
position: absolute;
width: 100%;
}
</style>
<link href="https://www.aeternus.org/linski_tabs/vermar.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.aeternus.org/linski_tabs/jquery.fwd_tabs.js"></script>
<script type="text/javascript">
/***********************************************
* Cross browser Marquee II- � Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=1500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1.0 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
<script>
$(function() { $(".tabs").fwd_tabs(); });
</script>
<div class="tabs">
<ul class="tab-menu">
<li>Quotes - NL</li>
<li>Quotes - EN</li>
<li>Quotes - DE</li>
<li>Quotes - FR</li>
</ul>
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee">
<div class="tab-content" id="tab-NL">
<br><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wees niet bang voor schaduwen, het betekent dat er ergens dichtbij licht is.</div>
<div class="right">Ruth Renkle</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Waarom moeilijk doen als het samen kan?</div>
<div class="right">Loesje</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Hij die anderen kent is geleerd. Hij die zichzelf kent, is wijs.</div>
<div class="right">Lao Tse</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Probeer eerst te begrijpen, dan pas begrepen te worden.</div>
<div class="right">Stephen Covey</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Zorg ervoor dat de stem van je hart luider is dan die van je ego.</div>
<div class="right">Chinees gezegde</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Er ontstaat geen harmonie als iedereen dezelfde noot zingt.</div>
<div class="right">Doug Floyd</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Hoewel iedereen uniek is, durft slechts een enkeling anders te zijn.</div>
<div class="right">Wouter Kloosterman</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
De mens die zich niet ontwikkelt, loopt de kans ingewikkeld te blijven.</div>
<div class="right">Eric de Waard</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Bij een overwinning op jezelf is er geen verliezer.</div>
<div class="right">Olaf Hoenson</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Vriendschap is liefde op het eerste woord.</div>
<div class="right">Harry Mulisch</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Mensen met vaststaande antwoorden zijn bang voor de vraag.</div>
<div class="right">Kees Tillema</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
De dichter is een beeldhouwer die muziek schildert.</div>
<div class="right">Clem Schouwenaars</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wie de toekomst als tegenwind ervaart, loopt in de verkeerde richting.</div>
<div class="right">Robbert Nijenhuis</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Misschien is ‘misschien’ het juiste woord voor zeker.</div>
<div class="right">Marc van Halsendaele</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Groot worden doe je door klein te blijven.</div>
<div class="right">Eckart Wintzen</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Het schijnt dat mensen die fouten durven maken ook veel creatiever zijn.</div>
<div class="right">Loesje</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Onze manier van aandacht geven, maakt het verschil tussen au en wow.</div>
<div class="right"> Isaac Shapiro</div><br><br>
</div>
<div class="tab-content" id="tab-EN">
<br><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Change is painful in the beginning, but worth it in the end.</div>
<div class="right">Jaykaran Sagar</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Raise your words, not your voice. It is rain that grows flowers, not thunder.</div>
<div class="right">Rumi</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
We are not retreating, we are just advancing in another direction.</div>
<div class="right">General D. McArthur</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Be the change you wish to see in the world.</div>
<div class="right">Mahatma Gandhi</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Each of us can make a difference. Together we make change.</div>
<div class="right">Barbara Mikulski</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Small opportunities are often the beginning of great enterprises.</div>
<div class="right">Demosthenes</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Minds are like parachutes, they work best when open.</div>
<div class="right">Thomas Dewar</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Let's make the impossible possible as possible as soon as possible.</div>
<div class="right">Pierre Linssen</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
A good plan today is better than a perfect plan tomorrow.</div>
<div class="right">George Patton</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
All things are difficult before they are easy.</div>
<div class="right">Thomas Fuller</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Honesty is being able to tell the truth without hurting anyone.</div>
<div class="right">Federico Fellini</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
It is harder to crack a prejudice than an atom.</div>
<div class="right">Albert Einstein</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Either you run the day, or the day runs you.</div>
<div class="right">Jim Rohn</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Ideologies separate us. Dreams and anguish bring us together.</div>
<div class="right">Eugene Ionesco</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Most smiles are started by another smile.</div>
<div class="right">Frank A. Clark</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
The only way to have a friend ist to be one.</div>
<div class="right">Ralph Waldo Emerson</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
The greatest amount of wasted time is the time not getting started.</div>
<div class="right"> Dawson Trotman</div><br><br>
</div>
<div class="tab-content" id="tab-DE">
<br><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Fang an! Dadurch alleine kann das Unmögliche möglich werden.</div>
<div class="right">Thomas Carlyle</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Das Neue ist immer risikoreich. Denn für das Neue gibt es keine Erfahrungen.</div>
<div class="right">N. Blüm</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wer glaubt etwas zu sein, hat aufgehört etwas zu werden.</div>
<div class="right">Philip Rosenthal</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Ich kann, weil ich will, was ich muss.</div>
<div class="right">Immanuel Kant</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Die Kinder sind die wirklichen Lehrmeister der Menschheit.</div>
<div class="right">Peter Rosegger</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wer seine Schwächen nicht kennt, hat eine Stärke zu wenig.</div>
<div class="right">Lothar Habler</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Das Wichtigste in einem Gespräch ist zu hören, was nicht gesagt wurde.</div>
<div class="right">Peter F. Drucker</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Das Unmögliche ist das, was man nie versucht hat.</div>
<div class="right">Hans Günther Adler</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Lass deine Taten sein wie deine Worte. Und deine Worte wie dein Herz.</div>
<div class="right">Ludwig Uhland</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wer etwas will, findet Wege. Wer etwas nicht will, findet Gründe.</div>
<div class="right">Dalai Lama</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Es gibt keine fünf oder sechs Weltwunder, sondern nur eines: die Liebe.</div>
<div class="right">Jacques Prévert</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Nicht: Es muß etwas geschehen, sondern: Ich muß etwas tun.</div>
<div class="right">Hans Scholl</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Interessante Selbstgespräche setzen einen klugen Partner voraus.</div>
<div class="right">Herbert George Wells</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Die Praxis sollte das Ergebnis des Nachdenkens sein, nicht umgekehrt.</div>
<div class="right">Hermann Hesse</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Die Gedankenfreiheit haben wir. Jetzt brauchen wir nur noch die Gedanken.</div>
<div class="right">Karl Kraus</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Optimisten leiden ohne zu klagen. Pessimisten klagen ohne zu leiden.</div>
<div class="right">Karl Farkas</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Wer wirklich Neues erdenken will, kann gar nicht genug, “verrückt” sein.</div>
<div class="right"> Niels Bohr</div><br><br>
</div>
<div class="tab-content" id="tab-FR">
<br><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Rien n’est permanent, sauf le changement.</div>
<div class="right">Héraclite d’Ephèse</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Aimer, c’est savoir dire je t’aime sans parler.</div>
<div class="right">Victor Hugo</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
L’extraordinaire se trouve au chemin des gens ordinaires.</div>
<div class="right">Paulo Coelho</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Un vrai leader n’a pas besoin de conduire. Il suffit qu’il montre le chemin.</div>
<div class="right">Henry Miller</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Aucun homme n’a reçu de la nature le droit de commander aux autres.</div>
<div class="right">Denis Diderot</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Il ya une grande différence entre gagner beaucoup d’argent et être riche.</div>
<div class="right">Marlène Dietrich</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
La beauté commence au moment ou vous décidez d’être vous-même.</div>
<div class="right">Coco Chanel</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Celui qui ne rêve pas, est déjà mort, mais il ne le sait pas.</div>
<div class="right">Jo Coeijmans</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Celui qui ferme sa porte aux erreurs, la ferme aussi aux vérités.</div>
<div class="right">Tagore</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
L’arbre se sauve en laissant tomber ses feuilles.</div>
<div class="right">Pierre Jean Jouve</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Ecrire, c’est une façon de parler sans être interrompu.</div>
<div class="right">Carla Lane</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Grand est celui qui n’a pas perdu son coeur d’enfant.</div>
<div class="right">Mencius</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Il est bon de lire entre les lignes, cela fatigue moins les yeux.</div>
<div class="right">Sacha Guitry</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Être un homme, c’est bien. Mais il y a encore mieux: être humain.</div>
<div class="right">Jules Romains</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Ce qui compte, c’est l’intensité d’une vie, pas la dureé d’une vie.</div>
<div class="right">Jacques Brel</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
Il faut vivre l’instant présent, jour après jour … ici et maintenant.</div>
<div class="right">Simone Elkeles</div><br><br>
<div style="float:left"><i class="fa fa-circle" style="font-size:0.6em"></i>
On oublie le dernier rêve; on se remémore toujours le premier amour.</div>
<div class="right"> Michel Bouthot</div><br><br>
</div>
</div>
</div>
</div>
A codepen demo, including HTML, CSS and JS, can be found here ...
Nevertheless, I am still open for suggestions to solve my my initial question.
And suggestions to further improve the alternative solution are alo welcome.
I have a list of div, each div with a button. When I click a button a text is displayed, and when I click out, the info hides with focus out function. If I have a button opened and I want to click a parent button, it's work's well, the button that was opened closes and the new button that I pressed open at the same time. The problem is when I want to do this action with a button that is next, it's don't do the two things and the same time (focus out and click the new button). Live example to check it: https://www.lagaleramagazine.es/
$(".p1").hide();
$(".p1-img").hide();
$(".btn1").click(function() {
if ($.trim($(this).text()) === 'Más detalles') {
$(this).text('Menos detalles');
} else {
$(this).text('Más detalles');
}
$(this).focusout(function() {
$(".p1").hide();
$(".p1-img").hide();
$(this).text('Más detalles');
});
var $p1 = $(this).next(".p1").toggle();
var $p1img = $(this).parents().eq(4).find(".p1-img").toggle();
$(".p1").not($p1).hide();
$(".p1-img").not($p1img).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="event-56092" class="ect-list-post ect-featured-event data-parent-post-id=" 56053 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/50008823_1936412149789348_6701274349090897920_n-1024x715.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule">
<span class="ev-day">25</span>
<span class="ev-mo">febrero</span>
<span class="ev-yr">2019</span>
</div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title">
<a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="VI Escuelas Deportivas para Mayores" rel="bookmark">VI Escuelas Deportivas para Mayores</a>
</h2>
<button class="btn1 button-more svg">Más detalles</button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>Desde el lunes 21 de enero y hasta el martes 18 de junio, todos los socios de los Centros Municipales de Mayores que participan en la XXIII Campaña de Atención al Mayor, podrán inscribirse en las diferentes actividades de la VI Escuelas Deportivas
para mayores. Se impartirán clases de pádel, tenis de mesa, petanca, rutas...</p>
Ir al evento »
</div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue">
<span class="ect-icon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</span>
<span class="ect-venue-details ect-address">
Area de atención al Mayor , Ayuntamiento de Badajoz,
<span class="tribe-address">
<span class="tribe-locality">Badajoz</span>
<span class="tribe-delimiter">,</span>
<abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr>
<span class="tribe-country-name">España</span>
</span>
</span>
<span class="ect-google">
<a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a>
</span>
<div class="ect-rate-area">
<span class="ect-rate-icon">
<i class="fa fa-money" aria-hidden="true"></i>
</span>
<span class="ect-rate">Gratuito</span>
</div>
</div>
</div>
</div>
</div>
</div>
I suggest you can remove the focusout functionality and use click event only since its more accessible. Please check the example below.
Note: The reason why focusout is not working for you is that you are targeting a global class .p1 and hiding it, which is basically hiding the other p tags as well.
$(".btn1").click(function() {
if ($.trim($(this).text()) === 'Más detalles') {
$(this).text('Menos detalles');
} else {
$(this).text('Más detalles');
}
var $p1 = $(this).next(".p1");
var $p1img = $(this).parents().eq(4).find(".p1-img");
$p1.toggle();
$p1img.toggle();
$(".p1").not($p1).hide();
$(".p1-img").not($p1img).hide();
});
.p1,
.p1-img {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="event-55758" class="ect-list-post ect-featured-event data-parent-post-id=" 51063 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/timthumb.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule"> <span class="ev-day">26</span> <span class="ev-mo">febrero</span> <span class="ev-yr">2019</span></div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title"><a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/" title="Exposición : “16 personajes que maravillan y … Miguel de Cervantes”." rel="bookmark">Exposición : “16 personajes que maravillan y … Miguel de Cervantes”.</a></h2>
<button class="btn1 button-more svg">Más detalles</button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>El próximo 11 de enero, se inaugurará en la Biblioteca Pública del Estado "Bartolomé J. Gallardo" de Badajoz , esta exposición que traza la vida literaria de Miguel de Cervantes(1547-1616), a través de un recorrido por su propia
obra y acompañado de otros 16 personajes que conmemoran la muerte del autor, incluyendo la presencia del novelista en...</p> <a href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/"
class="ect-events-read-more" rel="bookmark">Ir al evento »</a></div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue"><span class="ect-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> <span class="ect-venue-details ect-address"><span class="tribe-address"><span class="tribe-locality">Badajoz</span><span class="tribe-delimiter">,</span><abbr class="tribe-region tribe-events-abbr"
title="Badajoz">Badajoz</abbr><span class="tribe-country-name">España</span></span>
</span><span class="ect-google"><a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a></span></div>
</div>
</div>
</div>
</div>
<!-- second -->
<div id="event-58349" class="ect-list-post ect-simple-event data-parent-post-id=" 58345 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/02/cropped-32396-vegetables-1920x1200-photography-wallpaper.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule"> <span class="ev-day">26</span> <span class="ev-mo">febrero</span> <span class="ev-yr">2019</span></div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title"><a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" title="Come con la cabeza, no con la boca – Charlas para niños" rel="bookmark">Come con la cabeza, no con la boca – Charlas para niños</a></h2>
<button class="btn1 button-more svg"><span>Más detalles</span></button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>Fundación CB lanza de nuevo una campaña para educar y concienciar a los niños y padres sobre la importancia de seguir unos hábitos alimenticios saludables. Por la mañana se ofrecerán las charlas a los alumnos y por la tarde a los padres interesados
en ampliar conocimientos sobre buenos alimentos, enfermedades relacionadas con una mala alimentación,...</p> <a href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" class="ect-events-read-more"
rel="bookmark">Ir al evento »</a></div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue"><span class="ect-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> <span class="ect-venue-details ect-address">Fundación CB,<span class="tribe-address"><span class="tribe-street-address">C/ Pablo Sorozábal, s/nº1,</span> <br> <span class="tribe-locality">Badajoz</span><span class="tribe-delimiter">,</span><abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr><span class="tribe-postal-code">06006</span><span class="tribe-country-name">España</span></span>
</span><span class="ect-google"><a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=C%2F+Pablo+Soroz%C3%A1bal%2C+s%2Fn%C2%BA1%2C+Badajoz+Badajoz+06006+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a></span>
<div class="ect-rate-area"><span class="ect-rate-icon"><i class="fa fa-money" aria-hidden="true"></i></span> <span class="ect-rate">Gratuito</span></div>
</div>
</div>
</div>
</div>
</div>
Hey I'm trying to fix a tab inspired page for mobile. When the user clicks on a round circle it should ge to the text. Than when you click "Terug naar keuzemenu" you should go back to the circles (the navigation of the tabs). However when I want to go to other tabs the first time I click he doesnt scroll to the text section but the second time he does. So i have to click twice but cant figure out why.
FIDDLE
https://jsfiddle.net/Ljv5a2ez/2/
HTML
<div class="span12" id="xx-content">
<div class="clearfix row-fluid">
<div class="xx_content_inner">
<div class="xx_row-12" id="aj_logobox">
<div class="span3">
<div class="xx_active check-up-overview" id="lente">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#hometext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/home_delivery.jpg" />
</a>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="check-up-overview" id="full">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#collecttext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/click_and_collect.jpg" />
</a>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="check-up-overview" id="pro">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#moretext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/look_for_more.jpg" />
</a>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="check-up-overview" id="ebike">
<div class="xx_logo_container">
<div class="xx_logo_inner">
<a href="#smarttext">
<img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/smartpay_cirkel.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
<div class="xx_row-2 lente bike-show" id="hometext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Gratis thuis leveren vanuit je A.S.Adventure Store</h2></span></p>
<p class="xx_excl">Sta je in de winkel en is het product van je dromen niet meer beschikbaar in een andere maat of kleur?<br> Geen nood: indien voorradig in een andere A.S.Adventure Store, <strong>bestellen</strong> we het gewenste product in de Store en <strong>leveren</strong> we het <strong>gratis</strong><br> op een <strong>adres naar keuze</strong>. Van service gesproken.</p>
</div>
<div class="xx_row-2 full bike-hide" id="collecttext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Maak je keuze online en haal je bestelling op in de winkel</h2></span></p>
<p class="xx_excl">Vanuit je luie zetel shoppen? Winkelen bij A.S.Adventure kun je altijd en overal. Wil je helemaal zeker zijn van de maat of kleur?<br> <strong>Reserveer online zonder aankoopverplichting</strong> via de Click & Collect service en haal je bestelling later op in jouw<br> <strong>favoriete A.S.Adventure Store</strong>. Je kiest zelf wat je wel of niet koopt.</p>
</div>
<div class="xx_row-2 pro bike-hide" id="moretext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Ontdek een nog uitgebreider aanbod in onze webshop</h2></span></p>
<p class="xx_excl">Dacht je dat je alles al gezien had in onze Stores? Think again! In <strong>onze webshop vind</strong> je van de onderstaande merken een <strong>nog uitgebreider aanbod</strong>. <br>Gebruik de schermen in de Stores om naar de webshop te surfen of grasduin online door ons aanbod.<br> Keuze gemaakt? Laat je producten dan <strong>gratis afleveren</strong> via Home Delivery.</p>
</div>
<div class="xx_row-2 ebike bike-hide" id="smarttext">
<p><span class="xx_title" id="title"><h2 class="aj_h2fix">Betaal je aankopen in de winkel met je smartphone</h2></span></p>
<p class="xx_excl">Merk je tijdens het winkelen dat je je portefeuille bent vergeten? Geen nood, vanaf nu kun je <strong>in alle A.S.Adventure Stores ook betalen met SmartPay</strong>. <br>Even je <strong>smartphone</strong> opdiepen, de <strong>Bancontact-app</strong> openen en de <strong>unieke QR-code</strong> aan de kassa inscannen. <br>Je hoeft dan alleen nog even de betaling te bevestigen met je pincode. Makkelijk, veilig en efficiënt!</p>
</div>
</div>
</div>
<div class="clearfix row-fluid lente bike-show">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Hoe werkt het?</h3>
<ul style="list-style:none;">
<li><span>1.</span> We bestellen samen in de Store met jou het gewenste artikel via onze website.</li>
<li><span>2.</span> Je betaalt aan de kassa.</li>
<li class="xx_last-item"><span>3.</span> Je bestelling wordt enkele dagen later geleverd op een adres naar keuze of bij een afhaalpunt.</li>
</ul>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
<div class="clearfix row-fluid full bike-hide">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Hoe werkt het?</h3>
<ul style="list-style:none;">
<li><span>1.</span> Reserveer en betaal je product(en) online.</li>
<li><span>2.</span> Kies de winkel waar je je product(en) wenst af te halen.</li>
<li><span>3.</span> Je ontvangt via mail een bevestiging van je bestelling.</li>
<li><span>4.</span> Via mail of sms verneem je wanneer je product(en) klaarliggen.</li>
<li class="xx_last-item"><span>5.</span> Mocht je in de winkel alsnog beslissen je aankoop te annuleren, krijg je onmiddellijk je geld terug.</li>
</ul>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
<div class="clearfix row-fluid pro bike-hide">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Uitgebreid aanbod:</h3>
<div id="xx_aanbod_logos">
<a alt="Fjallraven" href="http://www.asadventure.com/benl/fjallraven" target="_parent"><img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_fjallraven.png" /> </a>
<a alt="The North Face" href="http://www.asadventure.com/benl/the-north-face" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_the-north-face.png" /> </a>
<a alt="Vaude" href="http://www.asadventure.com/benl/vaude" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_vaude.png" /> </a>
<a alt="Garmin" href="http://www.asadventure.com/benl/garmin" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_garmin.png" /> </a>
<a alt="Thule" href="http://www.asadventure.com/benl/thule" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_thule.png" /> </a>
<a alt="Eastpak" href="http://www.asadventure.com/benl/eastpak" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_eastpak.png" /> </a>
<a alt="Millet" href="http://www.asadventure.com/benl/millet" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_millet.png" /> </a>
<a alt="Gore Bike wear" href="http://www.asadventure.com/benl/gore-bike-wear" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_gore_bike.png" /> </a>
<a alt="Gore Running wear" href="http://www.asadventure.com/benl/gore-running-wear" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_gore_running.png" /> </a>
<a alt="Mi-Pac" href="http://www.asadventure.com/benl/mi-pac" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_mi-pac.png" /> </a>
<br>
<a alt="Suunto" href="http://www.asadventure.com/benl/suunto" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_suunto.png" /> </a>
<a alt="Polar" href="http://www.asadventure.com/benl/polar" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_polar.png" /> </a>
<a alt="Camel Active" href="http://www.asadventure.com/benl/camel-active" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_camel_active.png" /> </a>
<a alt="Dakine" href="http://www.asadventure.com/benl/dakine" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_dakine.png" /> </a>
<a alt="Lowa" href="http://www.asadventure.com/benl/lowa" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_lowa.png" /> </a>
<a alt="CKS" href="http://www.asadventure.com/benl/cks-dames" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_cks_black.png" /> </a>
<a alt="Komono" href="http://www.asadventure.com/benl/komono" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_komono.png" /> </a>
<a alt="Jack Wolfskin" href="http://www.asadventure.com/benl/jack-wolfskin" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_wolfskin.png" /> </a>
<a alt="BakerBridge" href="http://www.asadventure.com/benl/baker-bridge" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_baker-bridge.png" /> </a>
<a alt="BakerBridge Dames" href="http://www.asadventure.com/benl/baker-bridge-dames" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_baker-bridge-dames.png" /> </a>
<a alt="Bergans" href="http://www.asadventure.com/benl/bergans" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_bergans.png" /> </a>
<a alt="Van Hassels" href="http://www.asadventure.com/benl/van-hassels" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_van-hassels.png" /> </a>
</div>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
<div class="clearfix row-fluid ebike bike-hide">
<div class="xx_row-3">
<div class="span12">
<div class="xx_span_inner xx_top">
<h3>Hoe werkt het?</h3>
<ul style="list-style:none;">
<li><span>1.</span> Installeer de Bancontact-app op je smartphone:</li>
<li><span></span><a target="_blank" href="https://play.google.com/store/apps/details?id=mobi.inthepocket.bcmc.bancontact&hl=en">Google Play >></a></li>
<li><span></span><a target="_blank" href="https://itunes.apple.com/be/app/bancontact-mobile/id858371800?l=en&mt=8">Apple App Store >></a></li>
<li><span></span><a target="_blank" href="https://www.microsoft.com/en-gb/store/apps/bancontact/9nblggh3fvl1">Microsoft Store >></a></li>
<li><span>2.</span> Open de Bancontact-app en volg de instructies om de app te activeren en je bankkaart(en) toe te voegen.</li>
<li><span>3.</span> Aan de kassa scan je de unieke QR-code die op de betaalterminal verschijnt om je betaling te bevestigen.<br> Dat kan gewoon vanuit de Bancontact-app.</li>
<li><span>4.</span> Je smartphone toont de naam van de winkel en het te betalen bedrag op het scherm.</li>
<li class="xx_last-item"><span>5.</span> Druk op OK, geef je pincode op in de app en je krijgt een bevestigingsbericht te zien op je telefoon. Transactie geslaagd!</li>
</ul>
</div>
</div>
</div>
Terug naar keuzemenu
</div>
</div>
JS TABS
$(document).ready(function () {
$('.check-up-overview').click(function () {
if (!$(this).hasClass('xx_active')) {
var sCurrent = $(this).attr('id');
var sPrevious = $('.xx_active').attr('id');
$('.xx_active').removeClass('xx_active');
$('.' + sPrevious).removeClass('bike-show').addClass('bike-hide');
$(this).addClass('xx_active');
$('.' + sCurrent).removeClass('bike-hide').addClass('bike-show');
}
});
});
JS SMOOTH
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top //no need of parseInt here
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
It was because of your click handler on the parent class .check-up-overview.
It cause double trigger when you click on the circle which explains why you have to click twice to bind the scrollTop() function.
Here the JS code changed :
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
if (!$(this).parents('.check-up-overview').hasClass('xx_active')) {
var sCurrent = $(this).parents('.check-up-overview').attr('id');
var sPrevious = $('.xx_active').attr('id');
$('.xx_active').removeClass('xx_active');
$('.' + sPrevious).removeClass('bike-show').addClass('bike-hide');
$(this).parents('.check-up-overview').addClass('xx_active');
$('.' + sCurrent).removeClass('bike-hide').addClass('bike-show');
}
if($(window).width() < 768){
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top //no need of parseInt here
}, 900, 'swing', function() {
//window.location.hash = target;
});
}else{
e.preventDefault();
}
});
});
And here is the working fiddle
In my computer the arrow links and the carrousel work just fine in Firefox, Internet Explorer, Opera and Chrome. But in the site not the carrousel, nor the arrows links work. I have tried everything I could find about the code. But couldnt find why, I have even suspected the hosting service provider. But I don't think so. Anyway here is the code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Enseñame a vivir en libertad centro de rehabilitacion</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/moveme.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="img-responsive" src='images/NewLogo_name_300px.png' alt=''/>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Inicio</li>
<li>Info</li>
<li>Medico</li>
<li>Contacto</li>
<li>Testimonios</li>
<li>Certificaciones</li>
</ul>
</div>
</nav>
</div>
<!-- End Navigation -->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/slide1.jpg">
<div class="container active">
<div class="carousel-caption">
<h1>Recuperación</h1>
<p align="center">El primer paso es estar alejado de las fuentes que propician la adicción, para dar paso a la deshabituación.</p>
<p>Contacto</p>
</div>
</div>
</div>
<div class="item">
<img src="images/slide2.jpg">
<div class="container active">
<div class="carousel-caption">
<h1>Servicio</h1>
<p align="center">El segundo paso consiste en crear nuevos hábitos, mejorando los propios juicios y actitudes en pro de una vida más sana.</p>
<p>Contacto</p>
</div>
</div>
</div>
<div class="item">
<img src="images/slide3.jpg">
<div class="container active">
<div class="carousel-caption">
<h1>Libertad</h1>
<p align="center">El tercer paso consiste en adquirir las herramientas para vivir libre de adicciones a través de la práctica de principios espirituales y sociales que nos llevan a un sentido interno de libertad.</p>
<p>Contacto</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!--Carousel End -->
<div class="intro-block" id="info" >
<div class="container">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive tpad" src="images/logo2.png">
</div>
<div class="col-xs-9">
<h1>LA MEJOR OPCION<span class="text-muted">» Desde el año 2006</span></h1>
<p class="lead justify">Somos el centro de rehabilitación con mayor arraigo en Campeche, los que colaboramos como consultores y asesores en adicción sumamos más de 70 años de experiencia trabajando en pro de la SOBRIEDAD y la vida en libertad sin el consumo de substancias.</p>
</div>
</div>
</div>
</div>
<!-- End Intro Text -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 3000
})
</script>
</body>
</html>
I hope someone can explain me why it works in my computer and not in any browser if I go to the site, btw, it is www.vivirlibertad.com and it is in Spanish.
Thanks in advance.
It looks like there's a jQuery conflict on the site. I checked the console and it's saying "$ is not defined".
I see you've the following code just before the closing </body> tag:
<script>
$('.carousel').carousel({
interval: 3000
})
</script>
This is causing the conflict with your other JS files. Change the above to:
<script>
var $car = jQuery.noConflict();
$car('.carousel').carousel({
interval: 3000
})
</script>
Check the official documentation on jQuery conflicts here: https://api.jquery.com/jquery.noconflict/
I am trying to create two buttons with javascript. This button will sort the movies ascending and descending.
So I am trying to sort the full divs on the values that are in the h2 and h3. I don't know how to do this in JavaScript and this is a requirement.
So what I am trying to do is sort them by row.
With the values that are in the col-md-5 h2 and h3.
<!-- Film 1 -->
<div class="row">
<div class="col-md-7">
<a href="edge-of-tommorrow.html">
<img class="img-responsive img-hover" src="img/edge-of-tommorrow-700x300.jpg" alt="">
</a>
</div>
<div class="col-md-5">
<h2>Edge of Tommorrow</h2>
<h3>8.6</h3>
<h4>Tags: Science Fiction, Oorlog, Actie</h4>
<p> Een Derde Wereldoorlog is begonnen, een oorlog van aliens tegen de mensheid. Een hoge officier (Tom Cruise) word naar het front gestuurd om te helpen bij de landing in Frankrijk en zo weer grond terug te veroveren op de aliens. </p>
<a class="btn btn-primary" href="edge-of-tommorrow.html">Bekijk Film</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Film 2 -->
<div class="row">
<div class="col-md-7">
<a href="a-million-ways-to-die-in-the-wild-west.html">
<img class="img-responsive img-hover" src="img/a-million-ways-to-die-in-the-west-700x300.jpg" alt="">
</a>
</div>
<div class="col-md-5">
<h2>A million ways to die in the Wild West</h2>
<h3>7.2</h3>
<h4>Tags: Comedy, Western</h4>
<p>Een film waarbij je constant aan het lachen bent. Zodra de ene grap is afgelopen komt de volgende. Het gaat over een stuntelige schapenhoeder die voor de nieuwe mystrieuze vrouw in het stadje valt. Die toevallig getrouwd is met de gevaarlijkste scherpschutter van het Wilde Westen. En wat voor veel hilarische momenten zorgt.</p>
<a class="btn btn-primary" href="a-million-ways-to-die-in-the-wild-west.html">Bekijk Film</a>
</div>
</div>
<!-- /.row -->
well i think this may help :
var movies = Array.prototype.slice.call( document.getElementsByClassName("row"));
var result = "";
//descending numbers
movies.sort(function(a, b){return b.getElementsByClassName("col-md-5")[0].getElementsByTagName("h3")[0].textContent - a.getElementsByClassName("col-md-5")[0].getElementsByTagName("h3")[0].textContent});
//ascending numbers
movies.sort(function(a, b){return a.getElementsByClassName("col-md-5")[0].getElementsByTagName("h3")[0].textContent - b.getElementsByClassName("col-md-5")[0].getElementsByTagName("h3")[0].textContent});
//descending Letters
movies.sort();
//ascending Letters
movies.sort();
movies.reverse;
movies.forEach(function(entry) {
result += entry.innerHTML;
});
document.getElementById("Content").innerhtml = result;
add this to your html code :
<div id="Content">
<!--Movies-->
</div>