I have a website based on top of a single page that changes its content dynamically. The container of the content is a div with a few javascript and css animation (I gave my nav a class "animated") and I want to remove this class (so it won't be animated anymore) after the first time.
Is there any way to remove (after the first page load) or add (during the first page load) this class? I have already tried with the standard query code but when I click on a link that changes the content of my div container, the animations are all restarted.
Here is my html:
<nav class="main animated fadeInRight"><?php include('template/nav/main.php'); ?></nav>
I would like to remove the animated class with something like that but for every new page load.
<script type="text/javascript">
$(document).ready(function() {
$('nav').removeClass("animated");
});
</script>
This doesn't work because when I click a link to change my content, it also reloads the page and start all the animations again.
Thanks a lot!
It's tough to say without looking at all of your code, but I would probably put a URL parameter on the end of your nav links. You mentioned that clicking a link to change your content will also reload your page, right?
Well, on all of the links in your nav, put a parameter like this:
Page Name
Then at the top of all your pages where you include the nav:
<?php
if($_GET["firstLoad"] == "N") {
echo '<nav class="main fadeInRight">';
include('template/nav/main.php');
echo '</nav>';
}
else {
echo '<nav class="main animated fadeInRight">';
include('template/nav/main.php');
echo '</nav>';
}
?>
You are missing couple of ''
<script type="text/javascript">
$(document).ready(function() {
$('nav').removeClass("animated");
});
</script>
or even precise
<script type="text/javascript">
$(document).ready(function() {
$('nav[class="main"]').removeClass("animated");
});
</script>
You should put the nav in quotes, like
$("nav")
Otherwise it points to a non-existent variable
Each page reload starts your app completely anew.
If you'd like to prevent things from being animated during after a page refresh,
you could add a parameter to your string - ie /?animation=true
and look for it within your PHP file
<nav class="main <?php if($_GET['animation'] == true) {echo animated." ";} ?> fadeInRight"><?php include('template/nav/main.php'); ?></nav>
Then just remove it for all other links.
Unless i didn't get you right, so in that case- just fix your typos in the provided script:
$().ready(function() {
$("nav").removeClass("animated");
});
You can use web storage.
When the page first load you will remove the class from nav and later do some checking whether you already removed the class or not.
When the page loads you can do something like this:
<script>
if(localStorage.getItem("ClassRemoved") !== "true") {
// remove the class
localStorage.setItem("ClassRemoved", "true");
}
</script>
There are many solutions as this is open to possibilities. But this link will probably help you in creating a cookie and based on its life time, you may wish to animate or not.
Related
I have a site that was built a few years ago, it was constructed using nested tables which is turning out to be a major issue when trying to convert the template into a responsive design.
It is an html site with a lot of SEO so the client is not willing to convert to php and risk loosing the links.
So, I decided to use the jquery load method to load the menu into a div, so if I need to add a page or change the current menu, I only have to change 1 page.
So the menu uses an older javascript code to hide the dropdowns:
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
I didn't really think it would cause an issue as the css is working fine and I don't see any errors, here is how I include that html page.
<script>
$(function(){
$("#menud").load("menu.html");
});
</script>
<script type="text/javascript" src="script.js"></script>
however the dropdowns are not displaying on hover, I looked at the page in the inspector and see a lot of properties on the ul on the original page, but when inspecting the ul on the new page, it has no properties, and nothing happens when I hover over a link.
here is the link to the test page: http://pezzelectric.com/about-mobile.html
Instead of me posting 2 links, you can just remove the "/about-mobile.html" and go to the home page or any other page to see how the menu is supposed to be.
If I've understood correctly, I think you may be missing an initialisation script in your new page (/about-mobile.html).
The home page has the following near the bottom of the page:
<script type=text/javascript>
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
and your new page doesn't. I tested it in my console on /about-mobile.html and it seemed to work, but I'm unsure if you couldn't use that for some reason.
OK, there's a weird problem with a page I have.
When the page first loads, the divs I don't want to see are hidden. But seconds later, the divs are turned back on again. When I click on a link for the main page, the divs I don't want to see, are hidden, finally.
I want to write a script, like a POST event in old PowerBuilder where when everything is said and done, the divs I don't want to see, finally get hidden.
I have 1000's of lines of code and searching is painstakingly slow.
I simply need an event that makes sure that the divs I don't want to see, stay hidden.
Here's the code:
function hideChildDivs(parent) {
parent.children('div').removeClass('shown').addClass('hidden');
}
function changePage(id, pageName, title, icon) {
switch (pageName) {
case 'treeview':
hideChildDivs($("#otherPageContent"));
showOnlyActivatedPanel('none');
$('#otherPageContent').removeClass('shown').addClass('hidden'); //<!-- This is the container wrapper... see below. -->
$("#pgCoreSettingsMaintenance").removeClass('shown').addClass('hidden'); //<!-- This element needs to remain hidden when the dashboard shows -->
$("#contentDivWrapper").removeClass("hidden").addClass("shown");
$("#dash").removeClass();
$("#tree").removeClass();
$("#thres").removeClass();
$('#mainContentPane h1 > i').removeClass().addClass(icon);
$("#pgDashboard").addClass("hidden").removeClass("shown");
$('#headerTitleTree').html(title);
$("#headerTitleRow").removeClass('hidden');
$("#headerTitleRow").addClass('shown');
$("#" + id).addClass("active");
$("#dash").removeClass("active");
$("#thres").removeClass("active");
break;
case 'dashboard': //<!-- this is the first div that is displayed on startup -->
hideChildDivs($("#otherPageContent"));
showOnlyActivatedPanel('none');
preLoader = false;
$("#contentDivWrapper").removeClass("shown").addClass("hidden");
$('#headerTitleTree').html(title);
$("#headerTitleRow").removeClass('hidden');
$("#headerTitleRow").addClass('shown');
$("#dash").removeClass();
$("#tree").removeClass();
$("#thres").removeClass();
$("#pgDashboard").addClass("shown");
$("#pgDashboard").removeClass("hidden");
$('#mainContentPane h1 > i').removeClass().addClass(icon);
$("#" + id).addClass("active");
$("#tree").removeClass("active");
$("#thres").removeClass("active");
$('#otherPageContent').removeClass('hidden').addClass('shown');
$("#pgDashboard").removeClass('hidden').addClass('shown');
$("#pgCoreSettingsMaintenance").removeClass('shown').addClass('hidden');
loadPageIntoDiv("web-resources/templates/" + pageName + ".html");
getKPIs(myUrl, myCallback);
break;
case 'threshold':
hideChildDivs($("#otherPageContent"));
showOnlyActivatedPanel('none');
$('#mainContentPane h1 > i').removeClass().addClass(icon);
$("#contentDivWrapper").removeClass("shown").addClass("hidden");
$('#headerTitleTree').html(title);
$("#headerTitleRow").removeClass('hidden');
$("#headerTitleRow").addClass('shown');
$("#" + id).addClass("active");
$("#tree").removeClass("active");
$("#dash").removeClass("active");
$("#pgDashboard").removeClass("shown").addClass("hidden");
$('#otherPageContent').removeClass('hidden').addClass('shown');
$("#pgCoreSettingsMaintenance").removeClass('hidden').addClass('shown'); //<!-- this element needs to remain hidden when the dashboard shows. -->
break;
}
}
here are the divs in order...
<div id="otherPageContent" class="hidden">
<div id="pgDashboard" class="hidden"></div>
<div id="pgThresholdConfigurationPH" class="hidden"></div>
<div id="pgCoreSettingsMaintenancePagePH" class="hidden"></div>
</div>
Use setInterval() on body onload. It may help you to get some time interval after the page loading.
Preferably you should use setTimeout(). It will call your function once, where you can hide ur divs by giving a time interval.
Did you try using the .ready() function ?
http://api.jquery.com/ready/
$( document ).ready(function() {
changePage('','dashboard','','');
});
It also seems to me that if you need to have a timer waiting for your javascript to finish running in order to set your html back to how you want it, then the order in which your code runs on start isn't right. maybe have a rethink and re-order so that after the initial load your html elements are in the correct state.
Why not give the DIV tags a class attribute and then apply a CSS style of {display:none;}?
I've created a website using PHP include to get all the pieces. Then i've created a content page, this page is the only page that is refreshed. It's also the only page where the information/text is canged. I've used jQuery, PHP and Ajax to do this.
Now, this all works fine and as it should, but it has created some new problems regarding the websites navigation.
The navigation is just a set of links in a list. But whenever one of them is clicked I've made it so that it gets a new class with a new style. So that the user can see where he/she is on the website. I've done this with javascript and jQuery using the .toggleClass method. And this works, but now I'm getting to the problem at hand.
So the this is the deal:
When ever I refresh the website through the browser the .toggleClass information is lost and the button loses it's class and style. Even though the page is not changed, just refreshed. Also, when I click on the "home" button in my banner to return to the frontpage the opposite happens. The last button that had .toggleClass activated keeps it's class and style even though I'm not on that page anymore, but returned to the initial index.
I know that my code is not that impressive and it might be lots of faults in it. I'm not really that skilled at this yet, I'm still learning. Anyway is there a way to work around this? or is it's simply something I've done wrong? Or maybe there is an easier and better way to make a website like this?
Here is my code:
Index.php
<?php
include("layout/header.php");
include("content/content.php");
include("layout/footer.php");
?>
load_page.php
<?php
if(!$_GET['page']) die("0"); {
$page = (int)$_GET['page'];
if(file_exists('pages/page_'.$page.'.html')) {
echo file_get_contents('pages/page_'.$page.'.html');
} else {
echo 'There is no such page!';
}
}
?>
ajax.js
$(document).ready(function () {
checkURL();
$('ul li a').click(function (e) {
checkURL(this.hash);
});
setInterval("checkURL()", 200);
});
var lasturl = ""; // storage
function checkURL(hash) {
if (!hash) hash = window.location.hash;
if (hash != lasturl) {
lasturl = hash;
loadPage(hash);
}
}
function loadPage(url) // AJAX function
{
url = url.replace('#page', '');
$.ajax({
type: "GET",
url: "load_page.php",
data: 'page=' + url,
dataType: "html",
success: function (msg) {
if (parseInt(msg) != 0) {
$('#pageContent').html(msg);
}
}
});
}
javascript.js
$(document).ready(function(){
$('.button').click(function(){
$('.buttonselected').removeClass('buttonselected');
$(this).toggleClass('buttonselected');
});
});
I'm not going to post all of my HTML and CSS code, that would be too much. I already have a ton of code posted. But here are the essentials you might need.
My navigation that has the links for the dynamic content/pages that is generated through Ajax.
<nav>
<ul id="navigation">
<li> <a class="button" href="#page1"> Frontpage </a> </li>
<li> <a class="button" href="#page2"> Archive </a> </li>
<li> <a class="button" href="#page3"> Stuff </a> </li>
<li> <a class="button" href="#page4"> Portfolio </a> </li>
</ul>
</nav>
The content page where the pages is added through ajax and php.
content.php
<div id="pageContent">
<!-- content comes here -->
</div>
Lastly just some notes:
Yes, I am linking to a jQuery document.
Everything works as it should, excep for the buttons.
Let me know if you want more information about something.
Thanks for taking the time to read all this!
Solving the "home" button problem:
$(document).ready(function(){
$('.button').click(function(){
$('.buttonselected').removeClass('buttonselected');
$(this).toggleClass('buttonselected');
});
$('.ce').click(function(){
$('.buttonselected').removeClass('buttonselected');
$('#frontpage').toggleClass('buttonselected');
});
});
Where's the '.ce' is the class of the "home" button in the banner and the '#frontpage' is the id of the button that needs to get the new class after the link is pressed and the page returns to the index.
"Solving" the refresh problem:
Added this code to the content page.
$(document).ready(function(){
location.href = "#page1"
});
Added this code to the #page1.
<script type="text/javascript">
$(document).ready(function(){
$('.buttonselected').removeClass('buttonselected');
$('#frontpage').toggleClass('buttonselected');
});
This makes it so that whenver the page is refreshed it returns to the frontpage.
It also makes it so that whenever someone first visits the website they will see
the correct frontpage and at the same time the frontpage button will have the .toggleClass style indicating where they are on the page.
This is still not a good solution though, imo. The optimal thing would of course be to make it so that whenever the browser is refreshed it's still at the same page on the website and with it's correct button "pressed". I will post my final code when I eventuall figure it out. Just thought I'd post what I've done so far if anyone else is looking at this and haveing the same issue.
I use this fancy little jQuery toggle on my site, works great. But now I have a little larger text area I want to hide, and therefore I've included it in another php file, but when the site opens\refreshes the content is briefly shown and then hidden? Have I done something wrong or does it simply not work right with includes in it ?
Show me?
<div class="content">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
var par = jQuery('.content');
jQuery(par).hide();
});
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>
Use css to hide it
.content{
display:none;
}
Also
var par = jQuery('.content');
is a jQuery object so don't need to wrap it again as
jQuery(par).hide();
Just use par.hide(); but in this case, when you will use css to hide the element, then you don't need this anymore.
That will happen. The document briefly shows all the HTML before executing the code in your ready handler. (It has nothing to do with the PHP include.) If you want an element hidden when the page loads, hide it using CSS.
#myElement {
display: none;
}
The toggle should still work correctly.
You just need to don't use jquery document ready function. just use style attribute.
Show me?
<div class="content" style="display:none">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>
If this information is sensitive/not supposed to be seen without access granted, hiding it with CSS will not fix your problem. If it's not, you can ignore all of this and just use CSS with a display: none property.
If the information IS supposed to be hidden:
You need to only load the file itself on-demand. You would request the data with AJAX, do a $('.content').html() or .append() and send the result back directly from the server to the browser using something like JSON.
You are using the "ready" function that meant it will hide the element when the document is ready (fully loaded).
You can hide it using css:
.contnet { display: none; }
how you render you site server side does not affect how the site is loaded on the browser, what affects it is how the specific browser chooses to load your javascript and html, what i would recommend is set the element to hidden with css, since that is applied before anything else. And keep you code as is, since the toggle will work anyways
You can also clean up the code a little bit.
<script>
$(document).ready(function(){
$('.content').hide();
$('#toggleMe').click(function(){
$('.content').slideToggle('fast');
});
});
</script>
I have an element which shows important text to the user, as such I'd like to animate it in to the pane (motion draws the eye) rather than just have it somewhere where the user may miss it.
How can I have it showing by default (for the 1% or so of users who surf with javascript off), but animated in for the rest?
Using
$(document).ready(function(){
$('#messagecenter').hide();
$('#messagecenter').show('fade', 'slow');
})
Causes the element to load visible, then disapear, then fade.
display:hidden;
$(document).ready(function(){
$('#messagecenter').show('fade', 'slow');
})
Will of course hide it for users with no Javascript.
Is there any good way to do this?
Simple way: have the content hide for JS-enabled users immediately after
including it in the page, rather than waiting for the entire document to load:
<div id="messagecenter">Albatross!</div>
<script type="text/javascript">
$('#messagecenter').hide();
$(document).ready(function() {
$('#messagecenter').show('fade', 'slow');
});
</script>
This is usually enough to stop a flash of the content rendering as the page loads. But maybe not if the content is complicated/large. In that case:
Watertight way: add a class to an ancestor element (eg body) when JS is enabled, using CSS to ensure that the content being loaded is hidden-by-default only when JS is on:
<head>
<style type="text/css">
body.withjs #messagecenter { visibility: hidden; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#messagecenter').show('fade', 'slow');
});
</script>
</head>
<body>
<script type="text/javascript">
$(document.body).addClass('withjs');
</script>
...
<div id="messagecenter">Albatross!</div>
You can go with your second option of using display: none;, and include your text again inside a noscript tag.
Not exactly the cleanest thing though, since you'll be duplicating your element/text.
Easiest answer: Don't wait for document.ready to show it. Just put that code at the bottom of your <body> and it should hardly be noticeable.
Be sure to chain your queries too.
$('#messagecenter').hide().fadeIn('slow');
Always use the <noscript>...</nosript> tag for those 1% users.
And keep the code for the normal users untouched.