I'm trying to display a slideshow like the one shown here:- (http://www.w3schools.com/w3css/w3css_slideshow.asp) at the top when someone clicks "About Us, but I can't even get the onclick portion to work.
So far, I have:-
document.querySelector("p").addEventListener("click", function(){
document.querySelector("div").style.display = "block";
});
#here{
display: none;
}
<div id="here">Slideshow</div>
<p>About Us</p>
But it's not working for some reason. Can someone tell me what's wrong with the click function? I tried giving each of them individual IDs and I'm not sure what else to try. Thanks in advance for any help you guys can provide.
It should works, the position of your script is important make sure your script is defined after your DOM. Or you can add your script inside a DOMContentLoadedevent.
document.addEventListener("DOMContentLoaded", function(event) {
//script here
});
document.querySelector("p").addEventListener("click", function(){
document.querySelector("div").style.display = "block";
});
#here{display: none;}
<div id="here">Slideshow</div>
<p>About Us</p>
Related
This is what happen when I press the button "Contacto"
and should be like this
and now I'm using this javascript code
$(function(){
$('a#boton-contacto').on('click',function(e){
e.preventDefault();
var strAncla = $(this).attr('href');
$('body,html').stop(true ,true).animate({
scrollTop: $(strAncla).offset().top - $('nav').height()
}, 500);
});
});
but it made the button stop working, I want to know why, what is wrong?
you can go to my site and try it http://genebi.net I hope you can help me, thanks.
This code from you jQuery:
var strAncla = $(this).attr('href'); is setting strAncla to be "http://genebi.net/#contacto"
And since "http://genebi.net/#contacto" is not a valid selector, there is a javascript error that prevents the code from running.
To solve this, either:
Change your url for the element from:
<a id="boton-contacto" href="http://genebi.net/#contacto">CONTACTO</a>
to <a id="boton-contacto" href="http://genebi.net/#contacto">CONTACTO</a>
or:
2: You could use a data attribute in your link:
<a id="boton-contacto" href="http://genebi.net/#contacto" data-element="#contacto">CONTACTO</a>
and alter your jQuery as follows:
var strAncla = $(this).attr('data-element');
And it will work as you desire.
position: fixed; removes it from the normal flow of the document, and means that it doesn't occupy space. You can fix this without Javascript (and it'll be much less janky). It's a little awkward to work around this, but you can do it by having a blank div underneath it to fill up the space. Let's call it "header-spacer".
<div class="header">
...
</div>
<div class="header-spacer"></div>
And some CSS:
.header-spacer {
height: 70px;
}
I've got the following script. I've got 3 div's that are all display: hidden; that I want to drop down from the top of the page using slideToggle.
<script type="text/javascript">
$(document).ready(function(){
$("#irN").click(function () {
$('#irN_dd').slideToggle();
});
$("#myir").click(function () {
$('#myir_dd').slideToggle();
});
$("#myirmsg").click(function () {
$('#myirmsg_dd').slideToggle();
});
});
</script>
HTML:
<a id="irN">irN</a>
<a id="myir">myir</a>
<a id="myirmsg">myirmsg</a>
This script works great. The only issue is that all 3 can be opened at the same time. I only want 1 to be able to be open at any given time. So...how would I modify the script to do the following..
... if none are open and the viewer clicks one of the id's, it opens....
... if one of the divs are open and the viewer clicks another one of the id's, it slides the one open up and then slides the new one down.
Thanks in advance!
Edit in regard to comments
If you didn't want to check the markup etc, you could use something like the following to acheive what you wanted:
$("#irN, #myir, #myirmsg").click(function () {
var example = "#" + this.id + "_dd";
$(example).siblings("div[id$=_dd]").slideUp()
.is(":visible")
? $(example).delay(1000).slideToggle()
: $(example).slideToggle();
});
This fits all your functions into one concise event (could probably look nicer but I'm too tired to think of anything better right now).
jsFiddle example
I am trying to learn a little bit of java script, an any help would be greatly appreciated as I am pretty new to this world and just learning. I have tried looking up and down this site and have tried several suggestions from other users but none really seem to answer my issue.
I have this bit of code:
Im simply trying to get it to slowly hide a div box when the x is clicked. the button shows up and can be clicked but nothing happens. can someone help me out and show me what I'm doing wrong?
<div id="daily_deal">
<button id="close_x" onclick="myFunction($)"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
<div id="widget"><iframe src="dailydeal_widget.asp" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:155px; height:355px;" allowtransparency="true"></iframe></div>
function myFunction($) {
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});
})(jQuery);
You only need this bit:
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});
And then you can remove the onclick from the button:
<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
What it was doing is binding to the document ready event when you clicked the button, but as this has already happened the code that binds the click event is never run.
Use
<button id="close_x" onclick="toggleWidget();">
and
function toggleWidget() {
$("#widget").slideToggle("slow");
}
You can remove the $(document).ready() row. That is, remove line 2 and 6 from your function. It's implying that you want to do something when page has loaded, which will not occur at the same time as this function is called.
You only need this code:
$(document).ready(function() {
$("#close_x").on("click", function () {
$("#widget").slideToggle("slow");
});
});
the onclick="myFunction($)" is not neccessary anymore.
No need to call function in onclick, so your resultant html should be like this.
<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
And your script should be
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});
you can try this function for hide and show div tag:
$(document).ready(function(){
$(".productDescription").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".productDescription").slideToggle();
return false;
});
});
Like HtmL Code:
See Full Description
<div class="productDescription">
<p>This very large bath bomb will fizz up to two minutes, how good is that. Drizzled with soap it looks so authentic. This cake slice has a scent of Tropical Fruit including Pineapple, Mango & Grapefruit and you'll be surrounded by gorgeous flowers and glitter. Hide</p></div>
Finally designed a nice navigator for wordpress, but now the Links won't stay highlighted when click since it goes to different page. I need help with javascript code to change
<li class='last' id="meet">
<a href='?page_id=7'><span>Meet Dr. Ayala</span></a>
</li>
to become this
<li class='active' id="meet">
<a href='?page_id=7'><span>Meet Dr. Ayala</span></a>
</li>
I am sure I need <body onload="onload()"> on the body tag. Can someone please explain how to fix this?
Edit: I managed to find a working function but needs to be converted to onload instead of clicking button
<script>
$(document).ready(function(){
$("button").click(function(){
document.getElementById("meet").className = "active";
});
});
</script>
Finally got it working
<script>
function onload() {
document.getElementById("meet").className = "active";
}
window.onload = onload;
</script>
you can use jquery to add/remove class
e.g
$("#meet").addClass("Active");
$("#meet").removeClass("Active");
I think you are using php.
You could put your page number navigation in you body tag, or other solutions ..
url: http://mydomain?page_id=7
Pick op with $_GET['page_id']
Put something in your body tag
<body id="page_<?php echo $_GET['page_id'];?>">
Then in the JavaScript you can read th id of the body tag. Split out the number. Add some classes to your menu
<li class='menu_7'></li>
With the number you extract from the body tag id, you can target the menu class.
Hope that scenario will help you some. You can also add a static number in your page. That way you know for sure that you get a value. This is if your browser has to load a new page.
Other scenario could be an iframe or Ajax
$(document).ready(function () {
var nr = $("body").attr("id").split("_");
$(".menu_" + nr[1]).addClass("active");
});
Give this a go, it will find the current link, and jump back to its parent and give it a class of active.
$(document).ready(function(){
var urlBits= document.URL.split('/');
var current = urlBits[urlBits.length-1];
$('a[href="'+current+'"').parent('li').addClass('active');
}
Not sure how to explain this, I made a fiddle of what I'm attempting to do:
http://jsfiddle.net/x2btM/9/
here's my code:
HTML:
<div id="ZodOneDragBox">
<div id="aquariusSelectedComp1" class="killSelectedComp1" style="display:none;">
<img src="some.jpg">
</div>
</div>
<div id="ZodTwoDragBox">
<div id="aquariusSelectedComp2" class="killSelectedComp2" style="display:none;">
<img src="some.jpg" width="45" height="45">
</div>
</div>
<div id="aquariusIcnClick" class="iconClicker">
<img src="some_Icon.jpg" width="45" height="45">
</div>
Here's my jquery:
if ($('.killSelectedComp1').is(':visible')) {
//--SELECT BOX TWO
$('#aquariusIcnClick').click(function() {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
});
}
else {
//--SELECT BOX ONE
$('#aquariusIcnClick').click(function() {
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
});
}
Basically when you click on aquariusIcnClick the image aquariusSelectedComp1 will appear in div ZodOneDragBox. aquariusSelectedComp1 with the class of killSelectedComp1 is now visible, so when you click on the icon aquariusIcnClick again, the image should appear in ZodTwoDragBox. It works for the first box, but the selector is not reading that the image with the corresponding class is currently visible therefor executing what's in the if statement and showing the image in the second box. Hope I explained this well enough, once again, here's my fiddle:
http://jsfiddle.net/x2btM/9/
Not sure what I'm doing wrong, I've googled to make sure that I'm using the :visible selector correctly any and all help is very much appreciated. Thank you
you don't need bind your click on div condition instead check your div visibility onclick
$('#aquariusIcnClick').click(function() {
if ($('.killSelectedComp1').is(':visible')) {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
}
else
{
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
}
});
Live Demo
Your code is only being executed once when the page loads / or the dom is ready. This means that your if statement is only tested once. You need to modify your code so that the if statement occurs within the click handler. This will mean the visibility of killSelectedComp1 is tested each time the click occurs and you can then make your decision on what to do.
As #rahul has done ;)
Do not bind event condition rather put condition in the event
Live Demo
$('#aquariusIcnClick').click(function() {
if ($('.killSelectedComp1').is(':visible')) {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
}
else {
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
}
});