I have used this method to make a slider popping up when clicking on a button:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
I have made my own button for it + some other changes. However — i have struggled for 2 days now, trying to figure out how to be able to move my button out of the div it was in the original script.
Because; when i move it out of the original div, tat looks like this:
<div id="slidebottom" class="slide">
It simply stops working.
At first i thought it had something to do with the fact that the ID that started the slider animation, was defined as '(this')
So i ran a 'test' to figure out the ID that 'this' was and replaced it with that.
But still; nothing happens when i move it into another div.
I can move it out of all divs just below the 'body' tag — and there it will work as well.
Here is the html-part
<div id="slidebottom" class="slide">
<img src="xxx.jpg">
</div>
And here is the javascript:
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#hotels').next().slideToggle();
});
});
</script>
I am a rookie when it comes to javascript, so please forgive me if this is dumb question.
Just to sum up; i just want to be able to move my button somewhere else than this one particular div.
I hope I get it in total, so...
Your slider is based on next(), which means: starting at $("#hotels"), the function is binding the sliding functionality to the element directly after $("#hotels") - literally the next element, and ONLY the next element.
If the element you want to toggle is moved to another position in your HTML, the function will stop working, because it strictly refers to a position in the HTML, not to a designated element (like it would be done by a query selector).
Maybe you could post your whole HTML?
And thank you for answering.
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--*********** Aktivere CSS3 selectors i IE 7 & 8 ***********
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<![endif]-->
<title></title>
<!--*********** CSS ***********-->
<link href="../../css/dev_brokop_em.css" rel="stylesheet" type="text/css"/>
<!--
<link href="../../css/mediumstyles.css" media="only screen and (min-width: 768px)" rel="stylesheet" type="text/css"/>
<link href="../../css/smallstyles.css" media="only screen and (min-width: 610px)" rel="stylesheet" type="text/css"/>
-->
<link href="../../css/jquery.fullPage.css" rel="stylesheet" type="text/css"/>
<!--*********** JS ***********-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.fullPage.js"></script>
<!--*********** Aktivere Media Queries i IE 7 & 8 ***********-->
<script src="../../js/respond.min.js"></script>
</head>
<body id="em">
<div id="fullpage">
<div class="section" id="bg">
<!--************ Bottom Logos ************-->
<div id="circlesbottom">
<img src="../../img/experience_meetings/em_circles.png" border="0">
</div>
<div id="logobottom">
<img src="../../img/experience_meetings/em_logo.jpg" border="0" width="100" height="100">
</div>
<img id="pic" class="portrait" src="../../img/experience_meetings/hotels_off.png" border="0" width="100" height="100">
<div id="content">
<div id="movie_button">
<img src="../../img/experience_meetings/em_button_movie.png" width="90" height="90" border="0">
</div>
<div id="content_inside">
<h1>EXPERIENCE MEETINGS</h1><br>
<h2>Daectisquia volum velent audam dit qui adipiet pra posaepe liaspidebite veliqui vendit plia nus con nectur?Aqui berum que ommolenis quiasperum eturepe sunt alit exped quassunt prestem quam aut reiunt quae volupitatet omnient ma exerisq uundam fuga. Nem. Itatecatur, officiu reicietur?</h2>
</div>
</div>
<!--************* Slidebottom ************-->
<div id="slidebottom" class="slide">
<div id="inner">
<div id="bottomslider_wrapper">
<div id="bottomslider_content_01">
<h1>DANMARK</h1>
</div>
<div id="bottomslider_content_01">
<h1>SVERIGE</h1>
</div>
<div id="bottomslider_content_01">
<h1>NORGE</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!--************** Turn Hotel button on and off ************-->
<script type="text/javascript">
var newsrc = "hotels_on.jpg";
function changeImage() {
if ( newsrc == "hotels_on.jpg" ) {
document.images["pic"].src = "../../img/experience_meetings/hotels_on.png";
document.images["pic"].alt = "hotels_on";
newsrc = "hotels_off.jpg";
}
else {
document.images["pic"].src = "../../img/experience_meetings/hotels_off.png";
document.images["pic"].alt = "hotels_off";
newsrc = "hotels_on.jpg";
}
}
</script>
<!--************* Bottom slider ****************** -->
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#hotels').next().slideToggle();
});
});
</script>
<!--*********** fullpage.js ***********-->
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
</script>
</body>
</html>
I managed to work it out with the help of your logic. Here is the code i ended up with.
Thank you all for great help! :)
<div id="slidebottom" class="slide">
<div id="inner">
<div id="bottomslider_wrapper">
<div id="bottomslider_content_01">
<h1>DANMARK</h1>
</div>
<div id="bottomslider_content_01">
<h1>SVERIGE</h1>
</div>
<div id="bottomslider_content_01">
<h1>NORGE</h1>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#inner').slideToggle();
});
});
</script>
Related
I have a div that serves of container for a css animation that appears over the entire website's home page... a text and background that opens like curtains, revealing the website under it. It's like an intro landing page. The thing is I need it to appear only on first page load. I don't want it to appear on page refresh or if someone navigates thru the site and comes back to home page.
Can someone please show me how I would have to code this because I've search a lot on the web and didn't find any clear explanations for my particular case.
Here is the code for the div:
<div id="landContainer">
<div class="left-half" id="leftP"><article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article></div>
<div class="right-half" id="RightP"><article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article></div>
</div>
So the div I must display only on first page load would be the one with the ID landContainer, that contains a couple of other divs.
Since I'm new to this type of coding, I would need a complete example of the code I need to use with my div.
For Ian... here is the content of my index.html file...
<!DOCTYPE html>
<html>
<head>
<title>Landing page v2</title>
<link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
</head>
<body>
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Landing page v2</title>
<link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
if (localStorage.getItem("pageloadcount")) { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
</script>
</head>
<body>
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
</body>
</html>
The best way is to use session through which you can determine if its a new request or old.
Server side session will be best here
$( document ).ready(function() {
var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
I am a noob at Javascript, and I am trying to change a file link when I click on an anchor. Maybe I am going about this all wrong, but here it is. I want to change the PDF download link based upon the PDF I am displaying.
I have four links that are calling a file to populate the HTML object. The link I am trying to change is outside the object.
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
When I click on those links, I want the following href to change:
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
Here I tried one link in Javascript, but it is not working because I do not know what I am doing.
document.getElementById("ww").onclick = function () {
document.getElementById("pdfLink").href = "/products/HeywoodWhiteWove.pdf";
return false;
};
Complete HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="initial-scale=1.0">
<title>Heywood Envelopes</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<link rel="stylesheet" type="text/css" href="/css/products.css">
<script type="text/javascript" src="/js/popup.js"></script>
<script type="text/javascript" src="/js/merchant.js"></script>
<script type="text/javascript" src="/js/changeLink.js"></script>
</head>
<body>
<div class="include" data-include="/header.html"></div>
<div class="wrapper">
<div class="menu-container">
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
</div>
<div class="object-container">
<div class="download-link">
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
</div>
<object class="pdf" data="/products/HeywoodWhiteWove.pdf" type="application/pdf" id="display" width="100%" height="100%"></object>
</div>
</div>
<div data-include="/footer.html"></div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/load.js"></script>
<script>include();</script>
</body>
</html>
The code you provided should work. There is something else wrong on your page.
document.getElementById("ww").onclick = function () {
document.getElementById("pdfLink").href = "/products/HeywoodWhiteWove.pdf";
return false;
};
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
There is a space in the string you want to set as href. Does that solve the problem?
I am making a jeopardy game. When I click a div I want to do some effect on it. However, I can't even get a simple .hide to work. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jeopardy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customStyles.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/flip.js"></script>
</head>
<body>
<div class ="container">
<div class="row">
<div class="prizeAmount">
<div class="span2">
<h3 id="test">100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
</div>
</div>
</div><!--close container-->
</body>
</html>
javascript
$(function() {
$('#span2').click(function() {
$(this).hide(400);
/*$('#span2').hide(400); <--tried this also */
});
});
I've used jquery to animate navigation on a site before. Am i missing something obvious?
Your
$('#span2') // id selector
Should be
$('.span2') // class selector
Since it's a class
Your problem is that you are using the hash # which is the id selector instead of the class selector which is a dot ..
Try
$(function() {
$('.span2').click(function() {
$(this).hide(400);
});
});
You might want to read up more on the different jQuery Selectors on the official documentation
You dont have any elements with ID "span2", they are all CLASS=span2.
Try this:
$(function() {
$('.span2').click(function() {
$(this).hide(400);
});
});
Note: this will effect ALL elements with the class "span2" if you don't want that behavior, then use ID="span2" for a single element, and use unique names for each.
I'm a newbie in Jquery. I'm trying to print text on a document dynamically. I have a JavaScript function that is supposed to display images using the jQuery prettyphoto plugin. My function does not show the images but when I paste the code on a html file it works fine. Please help. A sample of my code is here.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./index.css" type="text/css">
<script type="text/javascript" charset="utf-8" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="spin.min.js"></script>
<script type="text/javascript" charset="utf-8" src="custom-functions.js"></script>
<link rel="stylesheet" href="./prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="./prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_related-content-images']").prettyPhoto({theme:'facebook'});
});
function showImages()
{
var stringData = '';
stringData = stringData + '<div id="related-content-images" >Related to this: <br/>'+
'<img id="not-hidden" src="images/sample-album-2.jpg" alt="" title="">'+
'<img id="related-images" src="images/sample-album-3.jpg" alt="" title="">'+
'<img id="related-images" src="images/sample-album-4.jpg" alt="" title=""></div>';
document.getElementById("content").innerHTML=''+stringData+'';
}
</script>
</head>
<body>
<div id="header"><div id="app-logo-image">
<img src="images/app-logo.png" id="app-logo"/></div>
<div id="header-form">
<input type="search" id="search-text-box" name="search-text-box" placeholder="Search">
<input type="submit" id="search-button" name="" value="Search">
</div>
</div>
<div id="container">
<div id="sub-header-menu">
<div id="music-albums">
<img src="images/music-albums-icon.png" id="music-albums-image"; onclick="fetch('music-albums');"/></div>
<div id="genres-icon">
<img src="images/genres-icon.png" id="genres-icon-image"onclick="fetch('music-genres');"/></div>
<div id="artist-icon">
<img src="images/artists-icon.png" id="artist-icon-image"onclick="fetch('music-artists');"/></div>
<div id="home-icon">
<img src="images/home-button.png" id="home-icon-image"/></div>
</div>
<div id="content" style="left:0%;">
click me
</div>
</div>
</body>
</html>
Your showImages function isn't executed until the link is clicked, however the prettyPhoto initialisation is only run once when the document finishes loading, and since showImages hasn't been run yet prettyPhotos can't find and enhance those images.
If you add this to the end of showImages everything should work:
$('#content a').prettyPhoto({theme:'facebook'});
I'm using the "DynamicPage" jQuery plugin to make my pages not reload when navigating. On the index page is a image slider plugin called "Coin-Slider". The dynamic page works fine, except when I click to go back to the index page where the image slider is. For some reason (from what I can tell) the Coin-Slider ready function isn't activating when it goes back to the index. May be something to do with the URL, as host.com/index.php works but host.com/#index.php does not. Any reason why it's doing this? I've tried including the ready function in the DynamicPage function in the js file to execute whenever the page changes, but it didn't help. Page is included below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Liberty Design, Scarborough</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
</head>
<body>
<div id="nav-back"></div>
<div id="wraps">
<div id="left-wrap"></div>
<div id="right-wrap"></div>
</div>
<div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
<div id="page-wrap">
<div id="header">
<div id="banner">
<div id="social"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></div>
</div>
</div>
<navbar>
<div id="nav">
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
<ul id="navbar">
<li>Home</li>
<li>Facilities</li>
<li>Staff</li>
<li>Where are we?</li>
<li>Contact</li>
</ul>
</div>
</navbar>
<section id="main-content">
<div id="guts">
<!-- Content Start -->
<div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
<div id="gamesHolder">
<div id="games">
<img src="images/banner_img/1335800583.png" alt="Welcome" />
<span>
<b>Welcome</b><br/>
Welcome to Liberty
</span>
<img src="images/banner_img/1335800633.png" alt="shop front" />
<span>
<b>shop front</b><br/>
this is the front of the shop
</span>
<img src="images/banner_img/" alt="staff #3" />
<span>
<b>staff #3</b>
<br/>this is the description for staff #3
</span>
<img src="images/banner_img/" alt="staff #1" />
<span>
<b>staff #1</b><br/>
this is staff #1
</span>
<img src="images/banner_img/" alt="asdas" />
<span>
<b>asdas</b><br/>
sdasdas
</span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
});
</script>
</div>
</section>
<div id="footer">
<!-- Cosmetics for the footer -->
<div id="footer-back"></div>
<div id="footer-wraps">
<div id="footer-left-wrap"></div>
<div id="footer-right-wrap"></div>
</div>
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
<center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
</div>
</div>
</div>
</body>
</html>
Ok, mydomain.com and mydomain.com/#anything are the same, they point to your default file which can be index.php, index.html or whatever. The browser doesn't refresh while it navigates to the same file but diffrent hash tags like: from file#hashA to file#hashB or from file to file#hashRandom or from file#index.php to file. Since the page doesn't refresh (gets loaaded) the document ready doesn't gets fired either (it already got fired the first time the page got loaded).
First fix to your problem:
instead of linking to mydomain.com/#index.php link to mydomain.com or mydomain.com/index.php
Second fix is:
<script>
$(document).ready(function() {
var sliderInit = false;
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
// Adding fix
$('#idOfLinkThatGetsClicked').click(function () {
if (!sliderInit) {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
sliderInit = true;
}
});
});
</script>