I want to make a video appear when flipping to a certain page of this application: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html Here is some of my amateur code:
$(document).ready(function(){
if (page === 2)
{
$("iframe").show();
}
else
{
$("iframe").hide();
}
});
It connects to an iframe tag that is absolutely positioned. Is that the right approach?
Thanks for your help :-)
Your code will only check the page once - when it's initially loaded.
You will want to put that if statement inside a click handler...
$('#elementYouClicked').live('click', function() {
if (page === 2) {
//show
} else {
//hide
}
});
If this is not what you are asking, can you elaborate on your question please?
Related
So I'm a student and just very lost in my coding class. My teacher gave us this code to make it so when I click on a header, it expands into a paragraph.
He then wants us to make it so when you click on the header, the paragraph disappears again. I just cannot figure out how to do this second part, making it disappear.
This is what the 'Show Article' code looks like.
function showArticle(id) {
document.getElementById(id).style.display="block";
Can anyone help me out please? I feel like it's so simple I'm just so bad at this. If you could tell me where to place it in my code that would be much appreciated as well.
If you are using js and not jquery
var visible = false;
function showArticle(id) {
if (visible === false) {
document.getElementById(id).style.display="block";
visible = true;
}
else {
document.getElementById(id).style.display="none";
visible = false;
}
}
function toggleArticle(id){
($('#'+id).is(':visible') ? $('#'+id).hide() : $('#'+id).show() )}
Just use jQuery's toggle.
$('#'+headerId).on('click', function(){
$('#'+id).toggle();
});
I was following this tutorial, trying to get my sites navigation bar to stick to the top of the page when it reaches the top of the page. I couldn't get it to work with the way they had it set up, so I tried to set it up in a different way and still can't get it to work. I put this code at the end of my body tag to try and make this work (the navigation bar has a css id of "navbar"):
jQuery
if ($document).scrolltop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("navbar").css("position","static");
}
Is there something I am missing?
Thanks in advance,
Bradon
Edit:
I want to thank everyone for the quick replies, and apologize as I am both new to javascript and stackoverflow. I have tried to implement some of the solutions suggested and here is what I have now:
<script type="text/javascript">
var navbar = $("#navbar");
navbar.on("scroll", function(e){
if (navbar.scrollTop() <= 0){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
}
});
</script>
I still can't get it to work properly.
Edit 2:
I would like to thank everybody for their help, I couldn't have figured it out without you guys. Here is the code I used if anybody should ever need it:
<script type="text/javascript">
var navbar = jQuery("#navbar");
jQuery(document).on("scroll", function(e){
if (jQuery(document).scrollTop() > 280){
navbar.css("position", "fixed");
navbar.css("top", "0px");
}
else{
navbar.css("position","static");
navbar.css("top", "auto");
}
});
</script>
this script assumes the thing you want stuck to the top has a class of "navbar". My problem was that wordpress wasn't accepting $ in jquery so I replaced it with jQuery. Thank-you once again everybody!
There is a bigger issue in that your scrolltop check is happening only once, while the page is loading. In the original tutorial, the code that checks the scrolltop is set to execute everytime a scroll event occurs:
wrap = $('#wrap');
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}
});
The "wrap.on('scroll')" part is very critical because this will cause the "scrolltop" value check to be triggered whenever the div is scrolled.
I believe the syntax is wrong. Missing parenthesis on document.scrollTop and also missing the # sign on navbar.
<script type="text/javascript">
if ( $(document).scrollTop() > 132){
$("#navbar").css("position", "fixed");
$("#navbar").css("top", "132px");
}
else{
$("#navbar").css("position","static");
}
</script>
I am trying to make a navigation bar which fades in when the user scrolls down. Right now I'm simply trying to get it to do anything when the user scrolls down, because I've tried to do a number of scripts, and it isn't working.
I'm referencing the script like this in my HTML document:
<body onload-src="nav.js">
And this is my script:
function nav() {
if (window.pageYOffset > 500) {
document.getElementById("scrollnav").style.visibility="invisible";
}
else {
document.getElementById("scrollnav").style.visibility="visible";
}
}
Any help is greatly appreciated! I know lots of people have asked questions like this, but I would really like to understand what I'm doing wrong here.
invisible is not a valid value for visibility.
What you probably want is hidden:
document.getElementById("scrollnav").style.visibility="hidden";
Here is a reference.
You should also make sure the element actually exists before accessing the style property. It may not seem important, but if you intend on using the code for the foreseeable future then you will most likely run into errors at some point.
function nav() {
var elem = document.getElementById("scrollnav");
if ( ! elem) {
console.warn("#scrollnav was not found on the page");
return;
}
if (window.pageYOffset > 500) {
elem.style.visibility="invisible";
} else {
elem.style.visibility="visible";
}
}
If the page is loaded and the browser window is between 1100px & 640px, the following jQuery script works properly:
$('#mobileMenu').click(function(){
if ($('body').hasClass('mobile-nav-open')) {
$('body').removeClass('mobile-nav-open')
} else {
$('body').addClass('mobile-nav-open');
};
});
What this does is when a#mobileMenu is clicked, a class is added to body and the mobile nav menu slides in, then the class is removed and the mobile nav menu closes upon another click.
But if the page is loaded at <=640px, the class .mobile-nav-open never gets added onto the body. I cannot for the life of me figure out why it isn't working. This code is also being inserted through Squarespace's code injection into the footer. There's a lot of JS packed into the template that may be interfering, but I can't figure out how to override it. Anyone able to help me out? Any help is appreciated.
The site can be seen here: https://ryan-vandyke-4rks.squarespace.com/
This looks to be what I'm trying to override:
Y.use(function (a) {
a.on("domready", function () {
if (640 >= a.one("body").get("clientWidth")) a.one("#mobileMenu").on("click", function () {
a.one("body").hasClass("mobile-nav-open") ? a.one("body").removeClass("mobile-nav-open") :
(a.one("body").addClass("mobile-nav-open"), a.one("body.email-open") && a.one("body").removeClass("email-open"), a.one("body.desc-open") && a.one("body").removeClass("desc-open"))
});
})
});
Instead of add/remove class on click try below approach to add/remove class on body tag.
function addBodyClass(){
if($(window).width() <= 640){
$('body').addClass('mobile-nav-open');
} else {
$('body').removeClass('mobile-nav-open');
}
}
$(window).on('load resize', function(){addBodyClass()})
Fiddle Demo
I have this show/hide set up here: http://jsfiddle.net/TwDSx/38/
What I would like to do is have the plus sign go away if the content is showing and vise versa if the content isn't showing hide the minus sign and show the plus.
I read articles on this using images to swap out, but nothing with just using html/css. Also, I would like to keep the javascript out of the html if this is possible, and just call for it externally.
any help is appreciated!
EDIT :
You can attach an event handler on your click to toggle the display attribute of the + or - button
$('#hide,#show').click(function(){
$('#hide,#show').toggle();
})
Quick demo:
http://jsfiddle.net/TwDSx/39/
I modified your Javascript a little and extended it so you can keep it in an external file, you just need to ensure you hide the #show div with CSS if you load the page with the content already showing, or vice-versa for the #hide.
The Javascript is as follows:
$('#show').click(function() {
ShowClick();
});
$('#hide').click(function() {
HideClick();
});
//This Javascript can be external
function ShowClick() {
$('#content').toggle('slow');
$('#hide, #show').toggle();
};
function HideClick() {
$('#content').toggle('fast');
$('#show, #hide').toggle();
};
The Js-Fiddle can be seen here: http://jsfiddle.net/mtAeg/
I think the simplest solution is to have only one button, #toggle, and to change the content of that button like so:
$('#toggle').click(function () {
if (this.innerHTML == '-') {
$('#content').slideUp('fast');
this.innerHTML = '+';
} else {
$('#content').slideDown('slow');
this.innerHTML = '-';
}
});
fiddle