Using same javascript function multiple times [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I got an javascript onclick function that (should) listen to a specific a tag based on the current score. It´s for a quiz. The onlick function listens for the click on the right answer (has class right). In the beginnig the right answer that the function should listen to is the first a tag with the class right. After this answer has been clicked the function should get executed and the question changes and the score is raised by one. Now the function should listen to the second a tag with the right class. I got a variable score2 that always is the value needed to select the right a tag but it ins´t working.
The Code:
var score = 0
var score2 = 0
document.getElementById("go").onclick = function() {
score++;
console.log(score);
console.log(score2);
document.getElementById("head").style.display="inline";
document.getElementById("question0").style.display="none";
document.getElementById("question1").style.display="block";
};
document.getElementsByClassName("right")[score].onclick = function(){
score++;
score2++;
//console.log(score);
console.log(score2);
document.getElementById("question"+score2).style.display="none";
document.getElementById("question"+score).style.display="inline";
};
and the html (the quiz is in german)
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="body">
<div id="inbody">
<div id="question0">
<h1>
WELCOME TO THE 100 QUESTION GAME!
</h1>
<h2 id="go" style="color:pink">
Lets GO!
</h2>
<p>
by strawberry studios
</p>
</div>
<div id="head" style="display:none;">
<h1>THE 100 QUESTION GAME</h1>
</div>
<div id="question1" style="display:none;">
<h3>
Von wo aus kann man nur nach Süden gehen?
</h3>
<br>
<br>
<a id="questionOneAnswerOne" class="right">Nordpol</a> <br> <!--Richtig-->
<a id="questionOneAnswerTwo" class="wrong" href="http://100questiongame.tk/index.html">Südpol</a> <br>
<a id="questionOneAnswerThree" href="http://100questiongame.tk/index.html" class="wrong">Äquator</a> <br>
<a id="questionOneAnswerFour" class="wrong" href="http://100questiongame.tk/index.html">Bayern</a> <br>
</div>
<div id="question2" style="display:none;">
<h3>
Was ist am teuersten?
</h3>
<br>
<br>
<a id="questionTwoAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Diamant</a> <br>
<a id="quoestionTwonswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Platin</a> <br>
<a id="questionTwoAnswerThree" href="http://100questiongame.tk/index.html" class="wrong">Gold</a> <br>
<a id="questionTwoAnswerFour" class="right">Osmium</a> <br> <!--Richtig-->
</div>
<div id="question3" style="display:none;">
<h3>
Wofür steht HTML?
</h3>
<br>
<br>
<a id="questionThreeAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Hyper Text Multiple Language</a> <br>
<a id="questionThreeAnswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Hyper Text Markup Language</a> <br> <!--Richtig-->
<a id="questionThreeAnswerThree" class="right">Hydrotecinmultiliquid</a> <br>
<a id="questionThreeAnswerFour" href="http://100questiongame.tk/index.html" class="wrong">Hype The Mother (a)lLong<a/> <br>
</div>
<div id="question4" style="display:none;">
<h3>
Welche Farbe hätte Cola ohne Farbstoffe?
</h3>
<br>
<br>
<a id="questionFourAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Gelb</a> <br>
<a id="questionFouranswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Erdbraun</a> <br>
<a id="questionFourAnswerThree" class="right">Grün</a> <br> <!--Richtig-->
<a id="questionFourAnswerFour" href="http://100questiongame.tk/index.html" class="wrong">Türkis<a/> <br>
</div>
<div id="question5 "tyle="display:none;">
</div>
<div id="question6" style="display:none;">
</div>
<div id="question7" style="display:none;">
</div>
<div id="question8" style="display:none;">
</div>
<div id="question9" style="display:none;">
</div>
<div id="question10" style="display:none;">
</div>
<script type="text/javascript" src="javascript.js"></script>
</div>
</div>
</body>
got to http://100questiongame.tk to test the code and go to https://floobits.com/BenBals/quiz.sublime-project to see the code live as I editing.

This is a way to do it:
Demo: http://jsfiddle.net/97gCk/3/
<div id="question1" style="display:none">
<h3>
Von wo aus kann man nur nach Süden gehen?
</h3>
<br><br>
<a id="question1_1" onclick="nextQuestion(this)" href="#">Nordpol</a><br>
<a id="question1_2" class="wrong" href="..">Südpol</a><br>
<a id="question1_3" class="wrong" href="..">Äquator</a><br>
<a id="question1_4" class="wrong" href="..">Bayern</a><br>
</div>
JS
var score = 1;
document.getElementById("go").onclick = function() {
document.getElementById("go").style.display="none";
document.getElementById("question"+score).style.display="block";
};
function nextQuestion (el){
el.style.color="green";
document.getElementById("question"+score).style.display="none";
score++;
document.getElementById("question"+score).style.display="inline";
};

Related

Local Storage and Form in Jquery

I have a div (form) that appears when you click a button,
I need to be able with jquery stored the information of the form.
For technical reasons, I can not use PHP so I turned to localStorage which seems simple, but does not work very well with my code:
$(document).ready(function(){
var i = 5;
$('.addbox').click(function(){
$('.formdiv').removeClass('formdiv');
$('#formulaire').addClass('formdivdisplay');
});
$('#submit').click(function(){
var titre = $('#titleform').val();
var chemin = $('#chemin').val();
var name = $('#name').val();
var statue = $('#statue').val();
var side = $('#select').val();
localStorage.setItem('titre', titre);
localStorage.setItem('chemin', chemin);
localStorage.setItem('name', name);
localStorage.setItem('statue', statue);
localStorage.setItem('side', side);
i = i + 1;
});
function drawBox(){
var block = '<div class="boxindex'+ i +'"><h1 class="boxtitle animated fadeInUp delay-500ms">'+ localStorage.getItem('titre') +'</h1></div>';
localStorage.setItem('block', block);
$('.container').append(localStorage.getItem('block'));
}
});
HTML code:
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Bienvenue sur SAKADO</title>
<!-- Styles -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="scripts/app.js"></script>
<link rel="stylesheet" href="styles/index.css">
<link rel="stylesheet" href="styles/nouvelleoutils.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,700|Space+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script defer src="https://friconix.com/cdn/friconix.js"></script>
</head>
<body>
<!--design-->
<div id="left"></div>
<div id="right"></div>
<div id="top">
<h1 class="h1 animated fadeInRight">SAKADO</h1>
<div class="divheader">
<a class="a1 active" href="home.html">Accueil</a>
<a class="a2" href="demande.html">Demandes</a>
<a class="a3" href="utilisation.html">Utilisation</a>
</div>
</div>
<div id="bottom">
<div class="addbox"><i class="fi-xwsuxl-plus-solid"></i></div>
</div>
<!--design-->
<div id="page">
<p class="tlegend">Les textes en <span class="Svert">Vert</span> sont les chemins d'accès, en <span class="Sorange">Orange</span> des informations importantes.</p>
<!--Box glossaire-->
<div class="container">
<div class="box">
<h1 class="boxtitle animated fadeInUp delay-500ms">Glossaire du CSG</h1>
<p class="Sbleu statue">Public</p>
<p class="Svert links "><a class="Svert">V:\Operations\GLOSSAIRE ver07-00 du 071212.pdf</a></p>
<a class="boxbtn" href="docs/GLOSSAIRE ver07-00 du 071212.pdf" target="_blank">Obtenir</a>
</div>
<!--Box Site Survey DDO-->
<div class="boxindex2">
<h1 class="boxtitle animated fadeInUp delay-500ms">Site Survey DDO</h1>
<p class="Srouge statue">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_Site Survey\site survey DDO presentation générale.pptx</a></p>
<a class="boxbtn" href="docs/site survey DDO presentation générale.pptx" target="_blank">Obtenir</a>
</div>
<!--OLC modele Galileo-->
<div class="boxindex3">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle OLC Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_OLC modèle\OLC - VA244 GALILEO FOC-M8 1-3.docx</a></p>
<a class="boxbtn" href="docs/OLC - VA244 GALILEO FOC-M8 1-3.docx" target="_blank">Obtenir</a>
</div>
<!--Modele DM Galileo-->
<div class="boxindex4">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle DM Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_DM et SC activities 2018\VA244_GALILEO FOC Daily-meeting OPS_OHB_2018-06-21.docx</a></p>
<a class="boxbtn" href="docs/VA244_GALILEO FOC Daily-meeting OPS_OHB_2018-06-21.docx" target="_blank">Obtenir</a>
</div>
<!--Modele M8 Galileo-->
<div class="boxindex5">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle M8 Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_DM et SC activities 2018\VA244-GALILEO FOC M8 -- DM One.docx</a></p>
<a class="boxbtn" href="docs/VA244-GALILEO FOC M8 -- DM One.docx" target="_blank">Obtenir</a>
</div>
<!--Box "A INSERER"
<div class="boxindex6">
<h1 class="boxtitle animated fadeInUp delay-500ms">"À INSÉRER"</h1>
<p class="statue ">Privée / Public</p>
<p class="Svert links "><a class="Svert">\\</a></p>
<p class="Sorange impt "></p>
<a class="boxbtn" href="docs/" target="_blank">Obtenir</a>
</div>-->
</div>
</div>
<!--Formulaire-->
<div class="formdiv" id="formulaire">
<form>
<h1 id="h1form">Ajouts d'Outils</h1>
<label for="title">Titre de l'outil</label>:<input type="text" id="titleform" name="title"><br /><br />
<label for="title">Entrez le chemin du nouvelle Outil</label>:<input type="text" id="chemin" name="chemin"><br /><br />
<label for="title">Entrez le nom.lextension du fichier</label>:<input type="text" id="name" name="name"><br /><br />
<label for="title">Entrez le Statue de votre Outil</label>:<input type="text" id="statue" name="statue"><br /><br />
<label for="title">Affichage de l'Outil</label>:<select id="select" name="side" form="side">
<option value="droite">Droite</option>
<option value="gauche">Gauche</option>
</select><br /><br />
<input id="submit" type="submit" value="envoyer">
</form>
</div>
</body>
</html>
I wish that when the user clicks on validate local storage stock all this information and then bring up code html and css (later) with the data he just entered and that the html code obviously remains on the page indefinitely .
Thank you.

fullPage.js only shows first page - hides every page but the first. Why?

Developing site and when I use fullPage js I can only see the first page..The links are in a proper head on dev site. I currently have to disable fullpage to get any work done on the site. I would like to have the feature at end of development but may have to just have a normal scroll...
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.css">
<body id='fullpage'>
<div class='section'>
<nav>
<div id="logo"></div>
<div id='menu'>
<p>Home</p>
<p>Resources</p>
<p>About</p>
<p>Contact</p>
<p>Books</p>
<p>Blog</p>
</div>
<div id='social'>
<img src="img/facebookIcon.png">
<img src="img/twitterIcon.png">
<img id='share' src="img/shareIcon.png">
</div>
</nav>
<div id='bookPromotion'>
<div id='bookStack'></div>
<div id='bookStackText'>
<h2>College is expensive.<br> Your books don't have to be.</h2>
<h1>Get 7 books for the price of 2</h1>
<div>
<p>28 SAT Math Lessons - Beginner</p>
<p>28 SAT Math Lessons - Intermediate</p>
<p>28 SAT Math Lessons - Advanced</p>
<p>320 SAT Math Problems</p>
<p>32 Most Effective Math Strategies</p>
<p>SAT Math Study Guide Companion</p>
<p>New Math Problems - Revised SAT</p>
</div>
<button>Get my books now</button>
</div>
</div>
<div id="bookSlider">
<div id="sliderCatBtn">
<p id='SAT'>SAT</p>
<p id='ACT'>ACT</p>
<p id='AP'>AP</p>
<p id='Other'>Other</p>
</div>
<div id="sliderNextBtn"></div>
</div>
</div>
<div class='section'>
<div id='newsletterTexts'></div>
<p id='newsletterHeadline'>GET 800 Newsletter</p>
<form id='newsletterBanner'>
<div class='left'>
<p>Tips and strategies delivered right to your email</p>
<input type='email' placeholder='Type Email Here'>
</div>
<div class='right'>
<div></div>
<input type='submit' value='Join'>
</div>
</form>
</div>
<div id='resources' class='section'>
<h1>Learning made easy with these free resources</h1>
<div class="colWrap">
<div id='lImg'></div>
<div id='centerCol'>
<div class="resource">
<img src="img/iconDiploma.jpg">
<h3>SAT Math Prep Course</h3>
<h4>This 12 part SAT math prep course has in-depth solutions to all math questions from Test 1 of the Official SAT Study Guide</h4>
</div>
<div class="resource">
<img src="img/iconVideo.jpg">
<h3>Videos</h3>
<h4>Our videos show you how to do your best on your next test</h4>
</div>
<div class="resource">
<img src="img/iconArticle.jpg">
<h3>Articles</h3>
<h4>Our articles are written to help you do your best on your next test</h4>
</div>
<div class="resource">
<img src="img/iconForum.jpg">
<h3>Forum</h3>
<h4>Come join in on the discussion. Ask your SAT, ACT, or SAT Subject Test questions now</h4>
</div>
</div>
<div id='rImg'></div>
</div>
</div>
<div class='section'>
<p id='aboutHeadline'>About Get 800 and Dr. Steve Warner</p>
<div id="aboutCol">
<img src="img/steve.jpg">
</div>
<div id='aboutBtn'></div>
</div>
<div class='section'>
<div id='contactBg'>
<form type=POST>
<input type='text' placeholder='Message Here'>
<input type'text' placeholder='Your Name Here'>
<input type'email' placeholder='Your Email Here'>
</form>
</div>
<footer>Copywright 2-15 Get 800 All Rights Reserved</footer>
</div>
</body>
Fullpage.js can not have the body as the wrapper.
Change:
<body id='fullpage'>
YOUR SECTIONS HERE
</body>
For
<body>
<div id='fullpage'>
YOUR SECTIONS HERE
</div>
</body>
You can find it in the documentation:
Sections should be placed inside a wrapper ( in this case). The wrapper can not be the body element.

jQuery filter - sort by attribute and sort by price

I'm trying to create dropdown that filters content.
I have two different types of filters in this:
1) filter that sorts by price
2) filter that sorts by attribute that is tagged in the product.
I'm new to implementing this type of request.
I have the two semi-working, but it seems like the two filters are conflicting with each other. For example: If I filter by price first, and then try to filter by attribute (dropdown), it doesn't filter correctly. But it filters correctly if I just filter down either by price or just by dropdown.
Also, right now I have the price filtering as buttons, but I would like the price to be in a separate dropdown as well. I'd also like to add "best seller" as an attribute in there, and I just tag the products in terms of best-selling.
Is this possible?
Can someone help? Take a look?
Thanks for any and all help!
fiddle: https://jsfiddle.net/daysable/eags255n/
My code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p>What speed do you need? </p>
<button id="asc"> sort by price asd</button><button id="desc"> sort by price desc</button>
<p>What speed bike do you need? </p>
<select class="filterby">
<option value="all"><h5>See All</h5></option>
<option value="15"><h5>15</h5></option>
<option value="20"><h5>20</h5></option>
<option value="25"><h5>25</h5></option>
<option value="50"><h5>50</h5></option>
<option value="150"><h5>150</h5></option>
<option value="160"><h5>160</h5></option>
</select>
<p>What do you like to watch? </p>
<select class="filterby">
<option value="all"><h5>See all packages</h5></option>
<option value="showtime"><h5>Showtime</h5></option>
<option value="hbo"><h5>HBO</h5></option>
<option value="cinemax"><h5>Cinemax</h5></option>
<option value="starz"><h5>Starz</h5></option>
<option value="ondemand"><h5>On Demand</h5></option>
</select>
<p>Do you want a contract? </p>
<select class="filterby">
<option value="all"><h5>See all deals?</h5></option>
<option value="contract"><h5>Contract</h5></option>
<option value="nocontract"><h5>No Contract</h5></option>
</select>
</ul>
<div class="FilterSorting">
<div id="FilterContainer">
<!-- CARD 1 -->
<li class="ux-offer all ondemand hbo 50 contract">
<div class="offer">
<p class="offer-lob">50 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 1</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">89</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 12 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
<!-- CARD 2 -->
<li class="ux-offer all showtime 15 nocontract">
<div class="offer">
<p class="offer-lob">15 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 2</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">44</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 6 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
<!-- CARD 3 -->
<li class="ux-offer all ondemand cinemax 20 contract">
<div class="offer">
<p class="offer-lob">20 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 3</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">109</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 6 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
<!-- CARD 4 -->
<li class="ux-offer all hbo 150 contract">
<div class="offer">
<p class="offer-lob">150 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 4</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">80</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 12 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
<!-- CARD 5 -->
<li class="ux-offer all showtime starz 25 nocontract">
<div class="offer">
<p class="offer-lob">25 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 5</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">220</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 12 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
<!-- CARD 6 -->
<li class="ux-offer all hbo starz ondemand 160 contract">
<div class="offer">
<p class="offer-lob">160 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 6</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">50</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 3 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#FilterContainer").find("li.ux-offer").hide();
$("div#FilterContainer").find("li." + filters).show();
});
</script>
<script>
function sortByPrice(a,b){
return $(a).find('.ux-priceoffer').text() > $(b).find('.ux-priceoffer').text();
}
function sortByPriceDesc(a,b){
return $(a).find('.ux-priceoffer').text() < $(b).find('.ux-priceoffer').text();
}
function reorderEl(el){
var container = $('.FilterSorting');
container.html('');
el.each(function(){
$(this).appendTo(container);
});
}
$('#asc').click(function(){
reorderEl($('.ux-offer').sort(sortByPrice));
});
$('#desc').click(function(){
reorderEl($('.ux-offer').sort(sortByPriceDesc));
});
</script>
</html>
Okay, so a couple of things, it might be wise to insert this data from somewhere instead of hard-coding it into the html. You could make a text file and read it into an array, even. That way you can get an array of total cost, and run your .sort against that since you're doing some weird stuff with payment plans(i.e $x for x months). You will (like I hinted) want to use something like sort over all the elements, that way it will return an entire sorted list, and you can append the entire list.
And of course this isn't the only way to do this, it just seems the most intuitive to me, at least for price, since you actually want to sort the list in ascending or descending order.

Individual detail buttons and global detail button

i'm trying to hide and show details in an infographic by clicking on a button directly in the info-graphic. Theres 3 buttons that i want to individualy show there content. But at the same time i have another detail button that should show and hide all of the details.
Here's my code so far.
<div class="item" style="background: #eeeeef;">
<div class="it-con alltag-con">
<div class="einlagen-con-neu">
<div class="ein-con-rel">
<img class="einlage-neu" src="<?php bloginfo('stylesheet_directory'); ?>/img/einlagen-ip/alltag-ip-min.png" />
<div class="detail-1-alltag detail-inf">
<div class="detail-inf-con hide-ein">
<h5>Pelotte</h5>
<span class="line-karo"></span>
<p>stimuliert die Muskulatur
<br> und entlastet gleichzeitig
<br> die Achillessehne</p>
<span class="caro-einlage"></span>
</div>
</div>
<div class="detail-2-alltag detail-inf">
<div class="detail-inf-con hide-ein">
<h5>Detorsionskern</h5>
<span class="line-karo"></span>
<p>stärkt den Mittelfußbereich
<br> und bietet statische
<br> Korrektur
</p>
<span class="caro-einlage"></span>
</div>
</div>
<div class="detail-3-alltag detail-inf">
<div class="detail-inf-con hide-ein">
<h5>Fersenschale</h5>
<span class="line-karo"></span>
<p>umfasst die Ferse sanft
<br> und führt den Fuß optimal
</p>
<span class="caro-einlage"></span>
</div>
</div>
</div>
</div>
<div class="mess-text">
<span class="x-btn">✕<br></span>
<span class="ei-btn"><span class="karo"></span>INFO
</span>
<h4><?php the_field('ueberschrift_einlagen', 102); ?></h4>
<br>
<p>
<?php the_field( 'texte_einlagen', 102); ?>
</p>
<span class="ei-btn-s"><span class="karo"></span> INFOS</span>
</div>
<div class="toggle">
<div class="det-btn"><span class="karo"></span> Detail</div>
<div class="inf-btn">Info</div>
</div>
</div>
</div>
my jquery
$(".caro-einlage").click(function(e) {
//e.preventDefault();
$(this).parent(".detail-inf-con").toggleClass("hide-ein");
//$(this).prev(".state-1").toggleClass("hide");
});
$(".alltag-con .det-btn").click(function(e) {
//e.preventDefault();
$(".alltag-con .detail-inf-con").toggleClass("hide-ein");
//$(this).prev(".state-1").toggleClass("hide");
});
Here's also a jsfiddler. https://jsfiddle.net/JayKray/sxk5e5a4/1/
Help is really apreciated.
: )

jQuery onclick load 1 div automatically [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
In this jQuery script, When I CLICK add customer link (in image 1) its load add customer form (in image 2) .How do I change this script to load automatically add customer form when I visited the page.Please help me thank you in advance .
Code:
<?php $this->load->view('template/admin_header.php'); ?><!-- load admin header -->
<!-- Script for add user box show Start -->
<script type='text/javascript'>//<![CDATA[
$(function () {
$(function () {
$('.load').on('click', function () {
var ID = $(this).attr('id');
$('.div').hide('fast');
$('.' + ID).show('fast');
});
});
});//]]>
</script>
<!-- Script for add user box show END -->
<div class="grid">
<div class="row">
<?php $this->load->view('admin/admin_topmenu.php'); ?>
</div>
<div class="row">
<?php echo form_open('admin/add_users_data') ?><!-- start of the form -->
<div class="span8">
<div style="padding-bottom:11px;">
<div class="div add_cus box"><!-- start of the add customer add form -->
<feildset>
<legend><i class="icon-user-2 on-right on-left"></i><strong>Add Customer</strong></legend>
<h6>*All fields marked are required</h6>
<lable>Name*</lable>
<div class="input-control text" data-role="input-control">
<input type="text" name="cus_name" placeholder="type your name">
<button class="btn-clear" tabindex="-1"></button>
</div>
<lable>Email*</lable>
<div class="input-control text" data-role="input-control">
<input type="text" name="cus_email" placeholder="type your email">
<button class="btn-clear" tabindex="-1"></button>
</div>
<lable>Phone*</lable>
<div class="input-control text" data-role="input-control">
<input type="text" name="cus_phone" placeholder="type your phone number">
<button class="btn-clear" tabindex="-1"></button>
</div>
<lable>Mobile (for Alerts)</lable>
<div class="input-control text" data-role="input-control">
<input type="text" name="cus_mobile" placeholder="type your mobile number">
<button class="btn-clear" tabindex="-1"></button>
</div>
<lable>Password*</lable>
<div class="input-control text" data-role="input-control">
<input type="password" name="cus_password" placeholder="Enter Your password">
<button class="btn-clear" tabindex="-1"></button>
</div>
<lable>Retype Password*</lable>
<div class="input-control text" data-role="input-control">
<input type="password" name="cus_passconf" placeholder="Enter Your password again">
<button class="btn-clear" tabindex="-1"></button>
</div>
<input name='cus_status' type='hidden' value='disabled'/>
<input type="submit" value="Add Customer" class="info">
</feildset>
</div><!-- END of the add customer add form -->
</div>
<div class="div add_oper">
RadioButton 2 Selected
</div>
<div class="div add_admin">
RadioButton 3 Selected
</div>
</div>
<?php echo form_close(); ?><!-- END of the form -->
<div class="span2">
<!-- start of side bar sub -->
<p><a href="#" id="add_cus" class="load item-title-secondary"><i class="icon-plus on-right on-left"></i>Add
Customer</a></p>
<p><a href="#" id="add_oper" class="load item-title-secondary"><i
class="icon-plus on-right on-left"></i>Add Operator</a></p>
<p><a href="#" id="add_admin" class="load item-title-secondary"><i
class="icon-plus on-right on-left"></i>Add Admin</a></p>
<!-- END of side bar sub -->
</div>
<div class="span3">
<!-- start of side bar main -->
<nav class="sidebar dark">
<ul>
<li>
<a href="<?php echo site_url('admin/add_users') ?>">
<i class="icon-plus-2"></i>
Add Users
</a>
</li>
<li>
<a href="<?php echo site_url('admin/manage_customer') ?>">
<i class="icon-user-2"></i>
Manage Customers
</a>
</li>
<li>
<a href="#">
<i class="icon-user"></i>
Manage Operators
</a>
</li>
<li>
<a href="#">
<i class="icon-user-3"></i>
Manage Admins
</a>
</li>
</ul>
</nav>
<!-- END of side bar main -->
</div>
</div>
</div>
<?php $this->load->view('template/admin_footer.php'); ?><!-- load admin footer -->
First of all, You need not use dom ready jquery event twice.
<script type='text/javascript'>//<![CDATA[
$(function () {
$(function () {
$('.load').on('click', function () {
var ID = $(this).attr('id');
$('.div').hide('fast');
$('.' + ID).show('fast');
});
});
});//]]>
</script>
It can be just
<script type='text/javascript'>//<![CDATA[
$(function () {
$('.load').on('click', function () {
var ID = $(this).attr('id');
$('.div').hide('fast');
$('.' + ID).show('fast');
});
});//]]>
</script>
Now for your question, If you want to load the add customer form on page load itself, You can achieve it by two ways.
Trigger the click event on page load. Add this line below your click handler
$('.load').click();
on page load, show the add_cus div. Add this line below your click handler
$('.add_cus').show('fast');
Hope its useful to you.

Categories