I have an array set up that has something added to the array every time to drop a word into a bucket on the page. I'm trying to show and hide certain div's depending on how many objects are in the array.
My code is:
if (test > 5){
$(".moving").hide();
$("#done").show();
}
This works perfectly except when the page first loads. The div with ID #done is still showing when the page first loads and then goes away when the array gets it's first object. (Array starts empty)
In your css just add #done{display: none;} That way the div will not show when page first loads.
Or use #done{visibility: hidden;} if you just want the div not to be visible.
If you don't have access to the HTML code you could hide it in ready function :
$(function(){
$("#done").hide();
//Or
$("#done").css("display","none");
//The rest of code
});
Hope this helps.
Use : #done{display:none;} or #done{opacity:0;}
Later in code, whenever you want to display it, you may use js/css to change display to block or opacity to 1.
The following function will hide done div and show moving div when page
is ready after complete page is rendered:
$(document).ready(function(){
$("#done").hide();
$(".moving").show();
});
Similarly you can use load method in to run a function on page load. but be aware load method is executed before complete page
is rendered
In your current code, you can add the following at the very beginning of ready function,
$('#done').hide();
or
$('#done').css('visibility','hidden');
Related
I have this code that updates the contents of a div every 5 seconds:
<script type="text/javascript">
$(document).ready(function(){
setInterval(sensor,5000);
});
function sensor(){
$("#ex2").load("http://localhost:8050/ss2");
}
</script>
The content is a table that shows the data of a database and it is constantly updated, the information is updated but at the moment these updates start it brings me the whole page inside the div in this way:
Does anyone know how I can solve this problem?
As for what I can see http://localhost:8050/ss2 is also the URL of your page to visit? You should create another page that only gives you the html of the table, then you can replace the original contents.
Or you should extract the table html from the data you have (not sure what it's code is to be able do this for you). Then create a node from that text and add it to you r DOM
Here is my Fiddle
Where i have
<div id="mulitplefileuploader" class="fileuploader">Upload</div>
<div id="status"></div>
in the html. In the Body i have the script that was in the fiddle and i have $(".fileuploader").uploadFile(settings); in the document.ready. All this will have only on file upload div,
If i am using a for loop say 5 times. It is not working I mean the div itself not appearing. As the for loop may have any count i can run the div in the for loop. But I should not have the same script in my html page (Because of few restrictions).
What shall i do to achieve my result. Allowing multiple div according to the html.
I tried here in this fiddle but it didn't succeed. How can i do this.
Note : All the upload should work, the js don't know how many loop will appear in the html
Update To run the code Here is the chop and you shall try it here in the display at html mode.
#reply to your comment: alright i see. If you take a look into the source code of the plugin, it has the missing .each to iterate all the retrieved selectors. so you can simply add one for it
$(".fileuploader").each(function(){ $(this).uploadFile(settings); });
http://jsfiddle.net/L08p1upt/4/
I am totally clueless, i don't know why this happening. I am trying to display the right section of HTML after page load. By default i set display:none; in CSS. And want to show the page during page load.
This is how i tried:
var f_e = $('#nav > li > a').first();
f_e.addClass('active');
f_e.next().slideToggle();
// Right section that make the div display block
$('#unigem-quickstart').show();
But its not working, here is the full code with jsfiddle
It's because you have two different instances of an ID. (This being unigem-quickstart) so it's only calling the first one (which is an a tag). You need to name it something else. (There should be only 1 ID of something!)
$('div#unigem-quickstart').show();
You used the id twice
I'm trying to put a piece of jquery together to show a hidden div and at the same time, refresh the parent div so that the javascript can amend and display the new height.
This is what i have so far but after some research have found than to refresh a div you have to use ajax and was wondering if anyone could lend a hand.
var $r = jQuery.noConflict();
$r(document).ready(function() {
$r('#open').click(function () {
$r('#expandable-2').show('slow');
$r(this).load(location.href + '.panel > *');
});
$r('#close').click(function () {
$r('#expandable-2').hide('1000');
$r(this).load(location.href + '.panel > *');
});
});
So far I have this,
a link with the id's of open and close
once clicked they give the css property of display block and display none to a div expandable-2
the part I'm stuck on is the refreshing of the parent div .panel in order to show the displayed div correctly.
Reason being is that I'm currently using the CodaSlider script in my page and the height is dynamically brought in depending on how much content is in the container. Now in order for the new content to be displayed when clicked open, the container needs to be refreshed thus showing the new content with a new height.
Hope that makes sense but any help would be awesome.
to "refresh" a div you just need to do:
document.getElementById("myDiv").innerHTML = new_content;
new_content may be the html returned by your ajax call but you definitely DON'T need an ajax call to "refresh" a div.
You can change html of a div with html method of jQuery.
$r(".content-div").html("Hello world");
If you want to load an html from server with ajax, you should use load function as below:
$r(".content-div").load("ajax/users.html");
There is a clear mess with your code. Just a few tips:
If your parent div contains #expandable-2, then you won't be able to do the ajax call and show the animation at once, because the ajax call is gonna destroy the #expandable-2 element while it is appearing/disappearing.
The proper way of loading external code through ajax into a div is:
$r('.panel').load('/path/to/url');
This will load the response of '/path/to/url' into the '.panel' div. Make sure that '/path/to/url' only returns the new content of the div, otherwise you cannot use $r('.panel').load, but an indirect approach must be used instead (i.e.: $r.ajax)
I'm working with on developing one of the social networking site and its having some notification features in left panel.
Whenever any user have played a game it will automatically change the number of notification count.
For that i have using below code line.
jQuery('#count_id').load('mypage.php');
But it will retrieve me whole site content with header,footer and content area in the response text, which is wrong as per my requirements.
but if i used below code of line
jQuery('#count_id').load('mypage.php #count_id');
then it will retrieve me a real count but add another div in between the original,
Original html:
<div id="count_id" class="notify">2</div>
and Code after retrieving response:
<div id="count_id" class="notify">
<div id="count_id" class="notify">1</div>
</div>
which is also not as expected. count are right but i don't want to add new div inside a original one.
What should i need to change in my code?
Thanks.
jQuery('#count_id').load('mypage.php #count_id > *');
That would bring only the DOM childs (the content)
Because this is how it works. Also it enables you to attach events to the element you load and delegate them inside this element (so new elements can also benefit from attached JavaScript events) - see .delegate().
If you want to replace the element, you can try the following:
jQuery.get('mypage.php', function(data){
jQuery('#count_id').replace(jQuery(data).find('#count_id'));
}, 'html');
I did not test it, but it should work.
Ivan Castellanos is however right. According to the documentation, you can provide any selector after the first space in the .load()'s parameter.
To retrieve count_id, you can directly get the html value in the div like this:
<script type='text/javascript'>
jQuery(document).ready(function()
{
countVal = $("#count_id").html(); //returns the html content inside the div, which is the count value
countVal = parseInt(countVal); //This will convert the string to type integer
});
</script>
Note:
If you want increase the count and update the div value, you can add the following lines:
countVal++;
$("#count_id").html(countVal);