I am trying to toggle showing something on my page, but it will show up but won't hide after I click the button again. When I click the button, the part I want to show shows up just fine, but when I click it again, it does not hide. Here is my code.
<head>
<script src="JQ.js"></script>
<script>
$(document).ready(function() {
$(".thingy").hide();
$(".show_button").click(function() {
$(".thingy").toggle();
});
});
</script>
</head>
<body>
<div class="show_button_box">
<div class="menu">
<div class="show_button" style="color:black;font-weight:bold;text-decoration:underline;position:relative;top:-8px;left:15px;">Show</div>
</div>
</div>
</body>
/* My php is here*/
echo"
<div class='thingy' onclick='$(\"thingy\").hide();'>
<div id=\"container\">
<div class=\"menu\">
<div class=\"button\" onclick=\"loadpage('bots','Bot Creator');\"><b style='color:black'>Create Bot</b></div><br /><br />
<div class=\"button\" onclick=\"loadpage('close','Emergancy Close Client');\" style=\"background-color:red;color:black;font-weight:bold;border-radius:6px;\">Emergency Close.</div><br /><br />
<div class=\"button\" onclick=\"loadpage('news','Spark News.');\" style=\"background-color:lime;color:black;font-weight:bold;border-radius:6px;\" >Spark News.</div></div><br /><br />
<div id=\"addedcontent\">
<div id=\"b-header\"> header </div>
<div id=\"b-content\"> content </div> </div></div></div>";
}
in your php
you have missed a . in css selector
<div class='thingy' onclick='$(\".thingy\").hide();'>
Related
The click of the button should toggle the visibility of that corresponding button's div. the first pic is what the code should look like from the start, and the second pic shows what the code should look like after clicking the submit button 1.
.toggleDiv{
background: gray;
max-width: 400px;
}
<!DOCTYPE html>
<html>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<body>
<div class="toggleNav">
<div class="Button1">
<input onclick="toggleMain" type="image" src="images/vinylBtn.png">
Button1
</div>
<div class="Button2">
<input onclick="toggleMain" type="image" src="images/cdBtn.png">
Button2
</div>
<div class="Button3">
<input onclick="toggleMain" type="image" src="images/tapeBtn.png">
Button3
</div>
</div>
<div class="toggleDiv">
<div id="mainText">
<h2>main div</h2>
<p>This is where the different divs shouls be toggling
</div>
<div id="Button1">
<p>This is the first div</p>
</div>
<div id="Button2">
<p>This is the second div</p>
</div>
<div id="Button3">
<p>This is the third div</p>
</div>
</div>
</body>
</html>
You can find all you elements by tag a in toggleNav and then add event listener. See my example in playground https://jsfiddle.net/denisstukalov/ompaeL0d/29/:
const links = document.querySelectorAll("div.toggleNav div a");
for (var i = 0; i < links.length ; i++) {
const divId = links[i].innerText
links[i].addEventListener("click",
function (event) {
event.preventDefault();
document.getElementById(divId).style.display = 'block';
},
false);
}
I want to remove all div elements with class facebook, twitter, LinkedIn, googlePlus who has parent id show-share-count
How to do this?
$("div").remove(".facebook");
$("div").remove(".twitter");
$("div").remove(".linkedIn");
$("div").remove(".googlePlus");
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="show-share-count">
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
<br /><br />
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
you can do this just only one line in script section.
<script>
$("#show-share-count").find(".facebook, .twitter, .linkedIn, .googlePlus").remove();
</script>
Just use following script for this
$('#show-share-count .facebook, #show-share-count .twitter, #show-share-count .linkedIn, #show-share-count .googlePlus, #show-share-count .share-count').remove();
or you can use .children()..
$("#show-share-count").children(".facebook , .twitter , .linkedIn, .googlePlus").remove();
Do like this .children() .They will find the children element of the show-share-count
$("#show-share-count").children(".facebook , .twitter , .linkedIn, .googlePlus").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-share-count">
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
<br /><br />
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
This is how you can do it:
$("button").click(function() {
$("#show-share-count").find(".facebook, .twitter, .linkedIn, .googlePlus, .share-count").remove();
});
Here is the JSFiddle demo
You can try to use .empty from Jquery if you want to empty the whole div
https://api.jquery.com/empty/
or
$("#show-share-count .facebook").remove()
if you want to remove a specific div
You can use below also:
$('#show-share-count .facebook,.twitter,.linkedIn,.googlePlus,.share-count').remove();
here is my code:
$(document).ready(function(){
$('#next').click(function() {
$('.current').removeClass('current').hide()
.next().show().addClass('current');
if ($('.current').hasClass('last')) {
$('#next').attr('disabled', true);
}
$('#prev').attr('disabled', null);
});
$('#prev').click(function() {
$('.current').removeClass('current').hide()
.prev().show().addClass('current');
if ($('.current').hasClass('first')) {
$('#prev').attr('disabled', true);
}
$('#next').attr('disabled', null);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<title>javascript problem</title>
</head>
<body>
<div id='div1' class="first current">
<p>
here the content of div 1
</p>
</div>
<div id='div2'>
<p>
here the content of div 2
</p>
</div>
//then another 9 divs
<div id='div12' class="last">
<input type="submit" value="submit" onclick="submit()">
</div>
<div class="buttons">
<button id="prev" disabled="disabled">Prev</button>
<button id="next">Next</button>
</div>
</body>
</html>
what i want to do is have the buttons (in the div 'buttons') in every div and not below. because i want them not to show up at the end, and i want to change the value of it on the first page.
but when i do this, they dont work anymore.
the codesnippet does not work
but what it does is, when you click 'next' the next div will be shown.
here is how i want it:
<div id='div1' class='first current'>
<p>here the content of div 1</p>
<button id="next">Start</button>
</div>
hope its clear
The id attribute in HTML should always be unique. Instead of using the same id on all your next/prev buttons, you should use a class instead. You can then bind the click event using the class instead and it will apply to all the elements with that class.
<button class="next">Start</button>
$('.next').click(function() { ... });
I kind of have 2 questions.One... I wish to fade in and fade out my text when I click on the images I have on my site. I very fortunately got to get toggle working thanks to the community here, but now I'm curious as to how I can get fadeIn and fadeOut working.
Also I wish to have my text be hidden or not visible until the moment I actually click on the image. One click of the image should cause the text to fade in. If I click the image again, I would like the text to fade out.
Any suggestions?
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JOHN DOE Project</title>
<link rel="stylesheet" type="text/css" href="something_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
</head>
<script>
$(document).ready(function () {
$(".clickToHideClass").click(function () {
// now toggle only the 'p' under 'this'
$('p', $(this)).toggle();
});
});
$(document).ready(function(){
$("p").hover(function(){
$("p").css("font-style","italic");
$("p").css("color", "pink");
$("p").css("font-weight", "bold");
},function(){
$("p").css("color","normal");
$("p").css("font-style", "normal");
$("p").css("font-weight", "normal");
});
});
</script>
<body>
<div id="wrapper">
<div id="outerWrapper">
<div id="header"><img src=" PUT SOMETHING HERE FOR IMAGE OF YOUR BANNER OR SOMETHING " alt="JohnDoe" width="366" height="66" />
</div>
<div id="topNavigation"></div>
</div>
</div>
<div id="wrapper">
<div id="outerWrapper">
<div id="contentWrapperhome">
<div class="clickToHideClass" id = 'col1'><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251" /></a>
<div id="text">
<h1><a>Language and the World</a></h1>
<p><a>An aspiration and dream of mine</a>
</p>
</div>
</div>
<div class="clickToHideClass" id = 'col1'><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251" />
</a>
<div id="text">
<h1><a>Music and Drama</a></h1>
<p><a>Keeps me pumping on every hour of the day!</a>
</p>
</div>
</div>
<div id="col1" class = "clickToHideClass"><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251">
</a><div id="text">
<h1><a>Friendship</a></h1>
<p><a> Without them I really wouldn't know Myself</a></a></p>
</div></div>
</div>
</div></div>
<div id="outerWrapper">
<div id="footer">Contact information | Website | Terms | Site by </div>
</div>
</div>
</body>
</html>
This is part of the CSS:
#text p a {
text-decoration: none;
}
In the css I want to enter, "display:none", but doing that will cause the toggle to not work.
If I understand your problem correctly, try this:
$(".clickToHideClass img").click(function() {
$(this).find("#text").fadeToggle();
});
I'm trying to follow this guide. I reach a problem when i try to change the HTML file when the user clicks a button.
This is my script:
<script>
window.$ = window.jQuery = WLJQ;
$("#btnPromo").click(function(){
$("#pagePort").load("pages/MainPage.html", function(){
alert("loaded!");
});
});
</script>
And this is my core HTML file (auto generated by Worklight):
<body onload="WL.Client.init({})" id="content" style="display: none;">
<!--application UI goes here-->
<div data-role="page" id="pagePort">
<div id="header" align="center">
<img src="images/logo.png">
</div>
<div data-role="content">
<div>
<input type="image" name="btnPromo" src="images/btnHotPromo.png" width="75%"/>
</div>
<div>
<input type="image" name="btnMall" src="images/btnMall.png" width="75%"/>
</div>
<div>
<input type="image" name="btnOutlet" src="images/btnOutlet.png" width="75%"/>
</div>
<div>
<input type="image" name="btnAbout" src="images/btnAbout.png" width="75%"/>
</div>
</div>
</div>
My goal is to change the #pagePort to MainPage.html every time the user clicks on #btnPromo.
The answer is i forgot to add the $(function(){}); at the start of the code, so the code should be :
$(function(){
$("#btnPromo").click(function(){
$("#pagePort").load("pages/MainPage.html", function(){
alert("loaded!");
});
});
});
And everything will be OK :D