So I'm trying to use hashes to animate from page to page. The first page that loads (home) fades in and out perfectly, but the page I'm trying to get to, test (look at hash stuff), won't animate/load at all. Why is this?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<title>Jack Cook</title>
<style>
#navbar ul {
list-style-type: none;
display: block;
text-align: center;
}
#navbar ul li {
display: inline-block;
}
#navbar img {
width: 64px;
height: 64px;
padding: 0 10px 0 10px;
}
#navbar a img:hover {
opacity: 0.4;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
pages = {
"home": ["Home", "This is my homepage!", "<p>Homepage</p>"],
"test": ["Test", "This is a testing page", "<p>Testing</p>"]
};
page = window.location.hash != "" ? window.location.hash.substr(3) : "home";
update(page);
$(document).on("click", "a", function() {
if ($(this).attr("href").substr(0, 4) != "http") {
event.preventDefault();
window.location.hash = "!/" + $(this).attr("href");
}
});
$(window).on("hashchange", function () {
$("body").fadeOut(1000, function () {
update(window.location.hash);
});
});
});
function update(page) {
$("body").css("display", "none");
$("#content").html(pages[page][2]);
$("body").fadeIn(2000);
}
</script>
</head>
<body>
<div id="navbar">
<ul>
<li><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></li>
<li><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></li>
</ul>
</div>
<div id="content"></div>
</body>
</html>
window.location.hash will be '#!/test'
Try this:
var page = window.location.hash.replace('#!/', '');
update(page);
Looks like you need to alter page passed into update to take out the extra characters. When utilizing square bracket notation, the property you are trying to reference must be exactly the string that defines it. As it stands currently, you are trying to get a property called ["#!/"] and it doesn't exist.
function update(page) {
$("body").css("display", "none");
$("#content").html(pages[page.replace("#!/", "")][1]);
$("body").fadeIn(2000);
}
jsFiddle example
Related
I have a slideToggle which is giving me an accordion-style function. This all works fine except for the first click which shows the content div briefly but then slides it closed straight away. Clicking again slides open correctly and all subsequent clicks function correctly.
Here's the Jquery script I'm using:
$(".tm-section-label").click(function() {
$(this).parent().addClass('active').find('.tm-extra-product-options-container').slideToggle('fast,easing');
});~
$(".tm-section-label").click(function() {
$(".tm-section-label").not(this).parent().removeClass('active').find('.tm-extra-product-options-container').slideUp('fast');
});
Here's the CSS I'm using :
.prodTabs div.cpf_hide_element {
display: none;
margin-bottom: 0;
}
.prodTabs.active > div.tm-extra-product-options-container {
visibility: visible;
height: auto;
opacity: 1;
}
.prodTabs.active div.cpf_hide_element {
display: block;
}
How can I make the initial click just slide the div open without having to click twice?
https://dotnetfiddle.net/hpJDeF
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.prodTabs div.cpf_hide_element {
display: none;
margin-bottom: 0;
}
.prodTabs.active > div.tm-extra-product-options-container {
visibility: visible;
height: auto;
opacity: 1;
}
.prodTabs.active div.cpf_hide_element {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to illustrates slideToggle() method -->
<script>
$(document).ready(function () {
$(".tm-section-label").click(function () {
$(this).parent().addClass('active');
var q = $(this).parent().find('.tm-extra-product-options-container');
if (q.hasClass('cpf_hide_element')) {
q.removeClass('cpf_hide_element');
}
else {
q.slideToggle('fast,easing');
q.removeClass('cpf_hide_element');
}
});
$(".tm-section-label").click(function () {
$(".tm-section-label").not(this).parent().removeClass('active').find('.tm-extra-product-options-container').slideUp('fast');
});
});
</script>
</head>
<body>
<div class="prodTabs" id="parent">
<div class="tm-extra-product-options-container cpf_hide_element" id="theContent">The content..</div>
<div class="tm-section-label">Click Me</div>
</div>
</body>
</html>
The thing is that I need to make a vertical images slider,so that when i press arrow down/arrow up every image changes it's position (the highest one goes bottom,the previous take it's place)
what it should look like:
what i have got so far:
$(function(){
var $vsliderboxes = $('#vsliderboxes'),
$vslidernav = $('#vslidernav'),
boxHeight = $vsliderboxes.height(),
current_index = 0;
function clickslide(){
clearInterval(intervalTimer);
clearTimeout(timeoutTimer);
timeoutTimer = setTimeout(function () {
intervalTimer = window.setInterval(autoslide, 2000);
}, 2500);
var index = $(this).index();
current_index = index;
$vsliderboxes.children().stop().animate({
top : (boxHeight * index * -1)
}, 500);
}
function autoslide(){
current_index++;
if (current_index >= $vsliderboxes.children().children().length) {
current_index = 0;
}
$vslidernav.find('a').eq(current_index).trigger('click');
}
$vslidernav.find('a').click(clickslide);
var intervalTimer = window.setInterval(autoslide, 2000),
timeoutTimer = null;
});
#vslidernav ul {
list-style: none;
padding: 0;
}
#vslidernav ul a {
padding: 0;
cursor: pointer;
height: 50px;
}
#vslidernav ul a:active {
color: #9C9A99;
}
#vslidernav ul a li {
height: 50px;
}
#vslidernav ul .active li {
}
.#vslidernav ul a:active {
background: transparent;
color: #9C9A99;
}
.vslider {
display: inline-block;
}
#vslidernav {
float: left;
width: 100px;
z-index: 1;
height: 250px;
}
#vsliderboxes {
position : relative;
overflow : hidden;
}
#vsliderboxes div {
height: 250px;
width: 900px;
}
#vsliderboxs-inner {
position : relative;
width : 900px;
height : 250px;
}
<div class="vslider">
<div id="vslidernav">
<ul>
<a id="1">
<li><img src="img/arrtop.gif"></li>
</a>
<a id="2">
<li><img src="img/arrdown.gif"></li>
</a>
<a id="3">
<li></li>
</a>
</ul>
</div>
<div id="vsliderboxes">
<div id="vsliderboxs-inner">
<div id="box1" class="active"><img src="img/slide1.gif"></div>
<div id="box2" class="inactive"><img src="img/slide2.gif"></div>
<div id="box3" class="inactive"><img src="img/slide3.gif"></div>
</div>
</div>
</div>
thanks for any advice
I think, that it isn't possible to solve this issue like you try to.
Because, when you work with the "top" property, you can't take one image from the top and append it to the other end because appending the image, will move the other images to another place --> the top property wouldn't be correct any more.
I think the contributed sliders (e.g. http://www.jssor.com/demos/vertical-slider.slider) work with the transform CSS property.
transform: translate3d()
Try to research about this property.
Roko C. Buljan answered on this page: loop carousel jquery
He uses a scrollTop loop for your problem.
I've also written a simple slider some time ago. I have now implemented the Roku C. Buljan method. Feel free to look at my code on Bitbucket.
https://bitbucket.org/d-stone/jqueryslider
An excerpt may help you:
value = prev_or_next == 'next' ? self.globals.slide_height : 0;
last = $('#container').find('> div:last');
first = $('#container').find('> div:first');
if(prev_or_next == 'prev') { // click on "next"-button
first.before(last); // put last element before first
settings.elements.inner.scrollTop(self.globals.slide_height); // set the scrollTop to 1 slide-height
}
// animation itself:
$('#container').stop().animate({scrollTop: value}, {
duration: settings.slide_speed,
done: function() {
if(prev_or_next == 'next') {
// put first item after last
last.after(first);
}
}
});
I'd advise you to validate your HTML (W3C Validator). There are some errors inside.
Invalid HTML can be the reason for some CSS and Javascript Errors.
I am building a simple Grocery List App and I am having issues trying to remove a place holder div element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Grocery List App</title>
<link type="text/css" href="style/form.css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<div id="left_side">
<div id="to_buy">To Buy:</div>
</div>
<div id="right_side">
<div id="in_cart">In Cart:</div>
</div>
</div>
<input type="text" id="item_body" placeholder="Type Item to Add">
<script src="scripts/jquery-1.11.2.min.js"></script>
<script src="scripts/grocery.js"></script>
<script src="scripts/jquery-ui/jquery-ui.js"></script>
</body>
</html>
JS
$(function () {
var rmv = false;
$('#item_body').keydown(function(e) {
if (e.keyCode == 13) {
var add = $('#item_body').val();
$("#to_buy").append('<div class="draggable_item">' + add + '</div>');
$("#in_cart").append('<div class="holder"></div>');
}
$(".draggable_item").draggable( {
axis: "x"
});
$(".draggable_item").dblclick(function() {
this.remove();
$('#in_cart > div:first').remove();
});
});
});
CSS
#to_buy {
float:left;
width: 50%;
height: 100%;
color: #00E5EE;
}
#in_cart {
float: left;
width: 49%;
height: 100%;
color: #00E5EE;
}
#container {
width:100%;
height: 100%;
}
#left_side {
height: 100%;
width: 50%;
float:left;
background: #5D5851;
}
#right_side {
height: 100%;
width: 50%;
float: left;
background: #6D5D4D;
}
#item_body {
float:left;
clear:both;
color: #326B62;
}
body {
background: #B1ADA5;
}
.draggable_item {
color: #FFF;
}
.holder {
height: 20px;
}
So the screen is split vertically between "to_buy" and "in_cart." When I add an item to "to_buy" I also add a "dummy" div to "in_cart" so that the two sides remain even. However, when I double click to remove an item, when
$('#in_cart > div:first').remove();
gets called, first one div is removed, then on the next double click two, then four etc etc. Apparently, it is getting called multiple times or something else wonky is going wrong.
This is because you bind event handlers for double click event on every Enter key press so they multiply on every item addition. Just move dblclick registration outside:
var rmv = false;
$('#item_body').keydown(function (e) {
if (e.keyCode == 13) {
var add = $('#item_body').val();
$("#to_buy").append('<div class="draggable_item">' + add + '</div>');
$("#in_cart").append('<div class="holder"></div>');
}
$(".draggable_item").draggable({
axis: "x"
});
});
$("#left_side").on("dblclick", ".draggable_item", function () {
this.remove();
$('#in_cart > div:first').remove();
});
Also note, that it makes sense to delegate double click event to the parent container #left_side so you don't have to worry about presence of elements at the time of event registration.
Here is a demo: http://jsfiddle.net/hx11gkcj/
I'm using JavaScript to achieve a preview box when hovering over a list. I'll show you my code and then a live website on how it works, then I will say the problem.
HTML
<div id="content">
<div id="theDiv"><h1>Custom </h1></div>
<div id="theDiv1"><h1>Custom One</h1> </div>
<div id="theDiv2"><h1>Custom Two</h1></div>
<div id="theDiv3"><h1>Custom Three</h1></div>
<div id="theDiv4"><h1>Custom Four</h1></div>
<div id="theDiv5"><h1>Custom Five</h1></div>
<div id="theDiv6"><h1>Custom Six</h1></div>
<div id="theDiv7"><h1>Custom Seven</h1></div>
<ul id="nav">
<li><b>Austria ></b> <br/>
<ul>
<li>Factsheet </li><br/>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
<li><b>Switzerland ></b> <br/>
<ul>
<li>Factsheet </li><br/>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
<li><b>Explanation Page ></b> <br/>
<ul>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
</ul>
</div>
CSS
ul {
padding-left:10px;
list-style: none;
width:150px;
}
ul li {
position: relative;
left:10px;
width:148px;
}
li ul {
position: relative;
display:none;
}
/* Styles for Menu Items */
ul li a {
display:block;
text-decoration: none;
line-height:2em;
height:2em;
padding:0 5px;
color:#666;
}
a:hover {color:#999;}
li ul li {width:139px; }
li.on ul { display:block; }
li.off ul{display:none; }
.linkhover:hover {text-decoration:underline; }
.linkxp:hover {text-decoration:underline; }
#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4, #theDiv5, #theDiv6, #theDiv7, #theDiv8 {
padding:10px;
float:right;
margin:0px 50px 0 0;
width:300px;
height:500px;
border:1px solid #000;
display:none;
}
JavaScript
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeIn();
},
function () {
$("#theDiv").fadeOut();
}
);
});
$(window).load(function(){
$(".theLink1").hover(
function () {
$("#theDiv1").fadeIn();
},
function () {
$("#theDiv1").fadeOut();
}
);
});
$(window).load(function(){
$(".theLink2").hover(
function () {
$("#theDiv2").fadeIn();
},
function () {
$("#theDiv2").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka").hover(
function () {
$("#theDiv3").fadeIn();
},
function () {
$("#theDiv3").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka1").hover(
function () {
$("#theDiv4").fadeIn();
},
function () {
$("#theDiv4").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka2").hover(
function () {
$("#theDiv5").fadeIn();
},
function () {
$("#theDiv5").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinkb").hover(
function () {
$("#theDiv6").fadeIn();
},
function () {
$("#theDiv6").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinkb1").hover(
function () {
$("#theDiv7").fadeIn();
},
function () {
$("#theDiv7").fadeOut();
}
);
});
Here is a link to a live view;
http://tubebackgrounds.co.uk/uni/demo/explanation.html#
As you can see, if you hover over the list style too quickly when they are being displayed, the other ones show up. I'm wondering if it is possible to use an if statement so only one
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeIn();
},
function () {
$("#theDiv").fadeOut();
}
);
});
can be enabled at once? Or maybe a way to make the fadeIn and fadeOut quicker.
part of the issue is just your css. you have each of your divs (#theDiv, #theDiv1, #theDiv2, etc...) floated next to each other. so when you hide one, the next one will pop up in its place. if you set their display propety to display:block you will set what I am saying. What you really want is those divs to be stacked one on top of another, like a deck of cards, then fade then in and out. To achieve this try adding this css:
#content {
position:relative;
}
#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4,#theDiv5, #theDiv6, #theDiv7, #theDiv8 {
border: 1px solid #000000;
display: none;
height: 500px;
margin: 0 50px 0 0;
padding: 10px;
position: absolute;
right: 0;
width: 300px;
}
now you javascript should work fine. you could make the javascript a bit nicer by using #beerwin suggestion and using a callback. that way the div fading in will only fadin once the previous one has faded out
Use callback function:
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeOut(function(){
$("#theDiv1").fadeIn();
});
});
});
I am working with hiding and showing divs in javascript, basically I want to show one div, then when a button is clicked hide that div and show another. I can't quite figure the javascript out here's what I have at the moment but the second layer isnt showing when I click hide.
<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('layer').style.visibility = 'hidden';
document.getElementById('topbar').style.visibility = 'visisble';
}
else {
if (document.layers) { // Netscape 4
document.layer.visibility = 'hidden';
document.topbar.visibility = 'visible';
}
else { // IE 4
document.all.layer.style.visibility = 'hidden';
document.all.topbar.style.visibility = 'visible';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('layer').style.visibility = 'visible';
document.getElementById('topbar').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.layer.visibility = 'visible';
document.topbar.visibility = 'hidden';
}
else { // IE 4
document.all.layer.style.visibility = 'visible';
document.all.topbar.style.visibility = 'hidden';
}
}
}
</script>
and css:
#topbar {
background-image: url(images/back.png);
background-repeat: repeat;
height: 30px;
margin-top: 20px;
visibility: hidden;
}
#show {
float: right;
padding-right: 40px;
padding-top: 10px;
}
#hide {
float: right;
padding-right: 40px;
}
#layer {
background-image: url(images/back.png);
background-repeat: repeat;
padding-left: 20px;
padding-bottom:20px;
overflow: auto;
}
using standard html links like:
Hide
Any help would be appreciated, cheers!
EDIT
okay switched to something completely new but it seems to not show after hiding
<script type="text/javascript">
$(function(){
$('#showhide').click(function(){
$('#layer').toggle();
$('#topbar').toggle();
});
});
and
Show/Hide
and
<div id="layer"></div>
You dont need jQuery for this.
Your functions could look like this:
function hideElement(elementId)
{
document.getElementById(elementId).style.display = 'none';
}
function showElement(elementId)
{
document.getElementById(elementId).style.display = 'block';
}
Then on page load, or in the css you can hide the first div. When the click happens you can then use showElement to show it.
This will probably help you: http://api.jquery.com/hide/ or the http://api.jquery.com/toggle/.
EDIT:
I am hoping that following example will help you.
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#a").toggle();
$("#b").toggle();
});
});
</script>
</head>
<body>
<div id="a">
I am a.
</div>
<div id="b" style="display: none">
I am b.
</div>
<div id="button">
<button>Show/Hide</button>
</div>
</body>
</html>