I need to reload the page after I've selected all images. I know that I have a mistake in the code, but I don't know where.
The variable is Num.
I use more than one jquery library, HTML, CSS and JS.
Files:
<link rel="stylesheet" type="text/css" href="layout.css"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="jquery.event.drop-2.0.min.js"></script>
<script type="text/javascript" src="colors.js"></script>
Script:
$(document).ready(function($)
{
var num=0;
$('.move')
.click(function(){
$( this ).toggleClass("selected");
})
.drag("init",function(){
if ( $( this ).is('.selected') ){
if (num == 5){
alert ("Warning.");
window.location.reload();
}
num++;
return $('.selected');
}
})
.drag(function( ev, dd ){
$( this ).css({
top: dd.offsetY,
left: dd.offsetX
});
});
});
HTML:
<h1>Hi</h1>
<div class="move" style="left:300px;"></div>
<div class="move" style="left:450px;"></div>
<div class="move" style="left:600px;"></div>
<div class="move" style="left:750px;"></div>
<div class="move" style="left:900px;"></div>
Here is the view of the page:
enter link description here
I think this is what you want:
$('.posun').click(function(){
$( this ).toggleClass("vybrate");
if($('.vybrate').length === 5){
window.location.reload()
}
})
$('.vybrate').length === 5 is simply checking to see if there are 5 elements with the class .vybrate. If there are, then we know every one has been selected, so we refresh the page.
Related
I have index.php in which I would like when the user clicks the button "Click" it to redirect to "newpage.php" but also for another page "Click.php" to be loaded into the div "content" within the newly loaded "newpage.php".
Similarly I would like for when "Click Also" is clicked for the user to be redirected to the same page "newpage.php" but a different page "ClickAlso.php" to be loaded into the same div "content".
index.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location.replace("newpage.php");
});
$(document).on('click', '.clickmealso', function() {
window.location.replace("newpage.php");
});
});
</script>
</head>
<body>
<div>
<button class="clickme">Click</button>
<button class="clickmealso">Click Also</button>
</div>
</body>
</html>
newpage.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {});
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
Try this solution:
index.php
change your document ready event to redirect to newpage.php using url params. For this example I used a parameter named 'page'.
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location = ("newpage.php?page=click");
});
$(document).on('click', '.clickmealso', function() {
window.location = ("newpage.php?page=clickAlso");
});
});
newpage.php
Define what happens once the page is accessed. This is where things get a bit more interesting. Each time this page (newpage.php) loads, it looks for the parameter 'page' in the URL and extracts its value. The parameter's value is then assigned to a variable I called $pageToGet.
After that we check whether the value is equal to 'click' or 'clickAlso' and we display the content accordingly using require.
<?php
$pageToGet = $_GET['page'];
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="content">
<?php
if ($pageToGet == 'click') {
require('Click.php');
} elseif($pageToGet == 'clickAlso') {
require('ClickAlso.php');
}
?>
</div>
</body>
</html>
Be sure to have your files: Click.php and ClickAlso.php in the same directory for this to work.
Good Luck
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>
So I've got a show/hide script I use on my website that works great. However there's 1 issue and one request.
Need to allow only 1 div at a time to show
When the div appears, to
have it 'slide' in from underneath the header.
Here's the script:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
Here is how the buttons work in relation to the div's in the HTML:
<a onclick="toggle_visibility('testing');">Testing</a>
<div style="display:none;" id="testing">
testing for page 2
</div>
Here is the layout of the screen in regards for the slide animation:
If anyone could help with adding these functions to the script or they have a different script that does the same thing but better please let me know.
Thanks
If you want to go with jQuery, then take a look at slideToggle():
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var activeDiv = 'welcome';
function toggle_visibility(id) {
if ( activeDiv === id ) return;
$('#' + activeDiv).css('display','none');
activeDiv = id;
$('#' + id).slideToggle();
$('#' + id).css('display','block');
};
$(document).ready(function() {
$('#welcome').slideToggle();
});
</script>
</head>
<body>
<a onclick="toggle_visibility('testing');">Show the First DIV</a><br>
<a onclick="toggle_visibility('testing2');">Show the Second DIV</a>
<div style="display: none;" id="testing">
The First DIV
</div>
<div style="display: none;" id="welcome">
Welcome!
</div>
<div style="display: none;" id="testing2">
The Second DIV
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle slideUp() and slideDown()</button>
</body>
</html>
I can't get the Resize aspect of jQuery UI to work, everything else works just fine.
I've look at several solutions listed on this site, and I've tried them all. It seems like the re-sizeable classes, and all the required elements are being added. I never see a handle or have the actual ability to resize.
Please take a look and let me know what I'm missing... if anything.
<link rel="stylesheet" href="canvas.css">
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script>
$(document).ready(function() {
var activeFrame = "#frame1";
$(function() {
$( "#assets" ).accordion();
});
$(".preview").click(function(event) {
console.log("Frame backdrop set to " + event.target.id);
$(activeFrame).removeClass();
$(activeFrame).addClass(event.target.id);
});
$(".prop").click(function(event) {
console.log("User added " + event.target.id + "_full");
$(activeFrame).append('<div id="' + event.target.id + '_full" class="drag "></div>');
propPrep();
});
function propPrep(event) {
$( ".drag" ).draggable({ containment: "parent" });
$( "#" + event.target.id + "_full").resizable({ aspectRatio: 16 / 9});
}
});
</script>
</head>
<body>
<div id="assets">
<h3>Backdrops</h3>
<div id="backdrops">
<div id="bd1" class="preview"></div>
<div id="bd2" class="preview"></div>
<div id="bd3" class="preview"></div>
</div>
<h3>Props</h3>
<div id="props">
<div id="garfield1" class="prop"></div>
</div>
<h3>Characters</h3>
<div id="characters">test</div>
</div>
<div id="strip">
<div id="frame1"></div>
<div id="frame2"></div>
<div id="frame3"></div>
</div>
</body>
Pass the argument event to the prop function
Change
$(".prop").click(function(event) {
..
propPrep();
});
to
$(".prop").click(function(event) {
....
propPrep(event);
});
I would first like to say that I am very new to JavaScript and Jquery, so this is hopefully a simple one,
I have some JS code to arrange the order of a few div tags which works in JSfiddle (http://jsfiddle.net/databass/Yh2L3/)
However when I try and put that into a webpage nothing happens
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Testing</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$('button').on('click', function (event) {
var divElements = $('#tours div'),
sortType = $(this).data('sort');
divElements.sort(function (a, b) {
a = $(a).data(sortType);
b = $(b).data(sortType);
// compare
if (a > b) {
return 1;
} else if (a < b) {
return -1;
} else {
return 0;
}
});
$('#tours').empty();
$.each(divElements, function (i, divElement) {
$('#tours').append(divElement.outerHTML);
});
});
</script>
</head>
<body>
<button data-sort='price'>Sort By Price</button>
<button data-sort='duration'>Sort By Duration</button>
<button data-sort='name'>Sort By Name</button>
<section id="tours">
<div class="result" data-price="749" data-duration="8" data-name="Basecamp">Info about tour 1 goes here</div>
<div class="result" data-price="2099" data-duration="19" data-name="Cycle Adventure">Info about tour 2 goes here</div>
<div class="result" data-price="1099" data-duration="25" data-name="Family Adventure">Info about tour 3 goes here</div>
<div class="result" data-price="3014" data-duration="18" data-name="Luxury Basecamp">Info about tour 4 goes here</div>
</section>
</body>
</html>
Thanks so much for your help
The javascript code you have executes before the elements being added to DOM. You need to put the javascript code just before the body ending tag or in document.ready
The handler passed to .ready() is guaranteed to be executed after the
DOM is ready, so this is usually the best place to attach all other
event handlers and run other jQuery code, jQuery docs