a DIV of one page (for example page01.php) flips 180° everytime that I click a specific button. In simple words, this button add or remove a class (rotator) to the DIV (rotate 180°) every time.
When I press another button to change the page (to page02.php) I need check if the DIV in page01.php has or not this class (rotator) and if this class it is applied I need to send it to the page02.php and apply the same class to another DIV to looks the same as the page01.php.
This is the Button in jQuery:
$(".btn-rotate").click(function() {
if ($("#box").hasClass("rotator")) {
$("#box").removeClass("rotator");
} else {
$("#box").addClass("rotator");
}
})
This is the DIV:
<div id="box" class="content-background bg-index">
This is the CSS of Rotator:
.rotator {
transform: rotate(180 deg);
transform - origin: center;
}
I Was thinking to use POST and GET of jQuery but i really don't know how to send the information.
Someone could have an idea?
Thanks!
Héctor
use local storage,
$(".btn-rotate").click(function(){
if ($("#box").hasClass("rotator")){
localStorage.removeItem('btn');
$("#box").removeClass("rotator");
} else {
localStorage.setItem('btn', 'rotator');
$("#box").addClass("rotator");
}
})
and in another page check if it's rotated or no
if (localStorage.getItem('btn') === 'rotator'){
$("#box").addClass("rotator");
} else {
$("#box").removeClass("rotator");
}
Assuming that you have the div with same id on both page page01.php and page02.php.
You can use Web Storage API to store certain values on browse for future uses as per your requirement. Here I have used sessionStorage. The sessionStorage object stores data for only one session (the data is deleted when the browser tab is closed). You can use localStorage property stores data with no expiration date.
On page page01.php
$(".btn-rotate").click(function() {
if ($("#box").hasClass("rotator")) {
$("#box").removeClass("rotator");
sessionStorage.removeItem("hasClass");
} else {
$("#box").addClass("rotator");
sessionStorage.setItem("hasClass", "yes");
}
})
on page page02.php
if (sessionStorage.hasClass) {
$("#box").addClass("rotator");
}
My Mistake, i forgot to put "=== 'rotator'. Thank you so much guys, works like a charm! Here is the final code:
page01.php:
$(".btn-rotate").click(function(){
if ($("#box").hasClass("rotator")){
localStorage.removeItem('rotated');
$("#box").removeClass("rotator");
} else {
$("#box").addClass("rotator");
localStorage.setItem('rotated','rotator');
}
})
Page 02.php:
get_localstorage();
function get_localstorage() {
if (localStorage.getItem("rotated") === 'rotator'){
$("#box").addClass("rotator");
}
};
Thanks again!!!
Related
I'm trying to display a download button on an HTML page only when a specific file on the web server is deleted. I thought I'd use a CSS display: none; then a PHP script with a while loop that'd look like this :
while (file_exists("/aaa/file.txt")) {
sleep(5);
}
//set display property of the invisibleLink class to block and continue
The thing is I don't know how to do this last step and every thread I've seen about modifying CSS with PHP doesn't work with my use case.
PHP executes before anything is displayed on the screen, so you are probably not going to be able to do that: the code would simply sleep for 5 and then continue with generating the rest of the html before displaying to the user.
What you might want to do instead is mark the button as display: none and then when the page is done loading have a js function that calls a php page that returns whether the file exists or not. Have the js function loop until the php page says the file is gone, then have the js function display the button and stop looping.
<button type="button" id="test_btn" style="display: none;">Download</button>
<script type="text/javascript">
$(document).ready(function () {
checkFile();
function checkFile() {
$.ajax({
url: '/path/to/file_checker.php',
type: 'GET',
success: function (data) {
if (data === "deleted") { // or whatever you want the response to be
$('#test_btn').show();
}
else {
checkFile(); // you can add a setTimeout if you don't want this running too often
}
}
});
}
}
</script>
Then your file checker php can be something similar to what you had:
if (file_exists("/aaa/file.txt")) {
echo "exists";
}
else {
echo "deleted";
}
Just build the button and hide it with a class like this:
<style>
.hidden{ display:none;}
</style>
<?php
if(!file_exists("path") ){ $class = "hidden" }
echo "<input type='button' class='$class' name='stuff'>woo</button>";
?>
I developed online exam for education company.I want to make my exam open on full screen mode.I tried several codes but don't work.Any help?
I disabled right click and f12.
You will need to use Javascript.
You can add a button or link that calls goFS() in it's href to trigger fullscreen in browser.
<script>
function goFS(){
if (fs.requestFullscreen) {
fs.requestFullscreen();
} else if (fs.webkitRequestFullscreen) {
fs.webkitRequestFullscreen();
} else if (fs.mozRequestFullScreen) {
fs.mozRequestFullScreen();
} else if (fs.msRequestFullscreen) {
fs.msRequestFullscreen();
}
}
</script>
I have a simple grid showing some information about the items in the database. this is index.php. When the user wants to edit one of the records they click on the link which opens another page (edit.php). When they are finished editing I would like to find a way to refresh the index.php so it has the updated info. Is there a way to do this?
I found this and modified it, seems to work well.
function onFocus(){
location.reload();
};
if (/*#cc_on!#*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
For refresh parent window from child window using javascript
opener.location.reload();
function onFocus(){
location.reload();
};
if (/*#cc_on!#*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
i have a child window whereby it contains the twitter sharing page... how to detect if the twitter sharing form has been submitted to twitter? note: this is a child window..
because I want to show an alert box after the sharing window closes
twitter sharing submit detection
var myWindow;
function openTwitterWindow(url){
var width=550;var height=425;var left=parseInt((screen.availWidth/2)-(width/2));
var top=parseInt((screen.availHeight/2)-(height/2));
var windowFeatures="width="+width+",height="+height+",status,resizable,left="+left+",top="+top+"screenX="+left+",screenY="+top;
myWindow=window.open(url,"subWind",windowFeatures);
jQuery('form#update-form').submit(function(){
onWindowClose(myWindow, myCallback);
});
}
function myCallback() {
alert("Your message has been shared. Thank you");
}
function onWindowClose(windowRef,callback, period) {
period = period || 20;
setTimeout(function check() {
if(windowRef == null || windowRef.closed) {
callback();
} else {
setTimeout(check, period);
}
}, period);
}
THAT CODE ABOVE IS WRONG...I NEED HELP
<a style="cursor: pointer" onclick="openTwitterWindow('https://twitter.com/share?url=<?php echo $url; ?>&text= and so on and so forth...
You can try something like this:
var child = window.open('urlofchild');
var closetime = setInterval(checkChildClose, 500);
function checkChildClose() {
if (child.closed) {
alert("Child window closed");
clearInterval(closetime);
}
}
Usually, when I design 'child' windows I use CSS and do virtual windows. Then you have all the information you need within a page. Then, you can use AJAX and JSON to work with the data.
Demo: http://www.codesoaked.com/demo/css-popup-window.html#
I want to check the value enter in the form by user. i have applied validation and its working. The problem is that if user enter any form value incorrectly and then clicks submit, the whole page is refreshed and all input data is lost.
I want that validations is checked before passing it to server. One of my friends told me its possible with AJAX. Can anyone guide a beginner on how to do this?
You can use javascript instead and save the server from transferring some extra KBs and calculations by using Ajax (which technically is javascript but you send the request back to the server)
Jquery has a plugin called validation that will make your life easier though:
http://docs.jquery.com/Plugins/validation
There is a live demo in the link above
For example if you wanted to validate the username you could do this
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
<form id="commentForm">
<input id="uname" name="name" class="required" />
</form>
yes you can use ajax or otherwise with your current approach you can use sessions to store user data and prevent it from being lost. with ajax you can show response from the server to show to the user.
$.ajax({
url: 'ajax_login.php',
type:'post'.
data:(/*data from form, like,*/ id: $('#username').val())
success: function( data ) {
if(data == 1) {
$('.feedback').html('data has been saved successfully');
//redirect to another page
}
else {
$('.feedback').html('data could not be saved');
$('.errors').html(data);
}
}
});
ajax_login.php would be something like
<?php
if(isset($_POST)) {
//do form validation if it is valid
if(form is valid) {
saveData();
echo 1;
}
else {
echo $errors;
}
}
?>
Do not need ajax.
Just set the onsubmit attribute of your form to "return checkfun();" and define checkfun some way like this:
function checkfun()
{
if ( all things were checked and no problem to submit)
return true;
else
{
alert('ERROR!');
return false;
}
}