I have 4 divs (div1, div2, div3, div4) that I want to show individually after the content of each one has loaded.
For instance, after content of div1 has loaded, div1 is showed ... after content of div2 has loaded, div2 is showed ... and so on.
I know how to make the content of the entire page shows after all content is loaded, but I can't find a way to do this without writing the same code for each one of the divs, and I'd like to know an optimized way to do it.
Also I'd like to show a image in each one of the divs while the content is being loaded.
Thanks in advance
Seems like the thing you're searching for is jQuery queue
In your main document you could just hide the DIV like this:
<div id="classname" style="overflow:hidden; display:none;">
And then at the end of your code which loads your content (assuming your doing something like a sql data load) just call a function to show the DIV like this:
ShowHide('classname');
The function would look something like this:
function ShowHide(h) {
var tbl = document.getElementById(h);
tbl.style.display == 'block' ? tbl.style.display = 'none' : tbl.style.display = 'block';
}
For showing a loading image in the mean time maybe create another DIV that is hidden at the same time your main DIV is shown. I'm sure there i
Related
I've got this element in my template
<div [innerHTML]="doc"></div>
the doc is updated as user types in another box on the screen. The doc is being generated on server with regular time intervals and is returned back to the browser, where I update it in the component.
this.mdService.convert(this.text).subscribe(html => {
this.doc = html
});
That works nicely with small fragments. But when those get bigger, redrawing HTML takes time and screen is sort of flickering. What would be a way to solve that problem?
I have 2 divs one is a big div(like a notepad) and there is a little div(like a bookmark) that is under the big div on the side of it
but now i want to use the hover event on the little div but because it has z index it doesn't fire.
like this:
http://jsfiddle.net/xf7Ca/8/
i want to do like this:
$(document).read(function(){
$("#bookmark").hover(function(){
//do something
});
});
how can i have access to the bookmark div?
You forgot to load jQuery in your jsFiddle and here is your mistake :
$(document).ready(function(){...});
not
$(document).read(function(){...});
You could have found it by yourself using the console
jsFiddle demo
I have 3 div's images are below. They pull the entire column and display it. I need it to only display say 255 characters. And then I have a Read More link where they can click to go to the full article.
You see how the box on the left has the Read More I would like all 3 boxes to display part of the content and then have the read more link. The only reason the first box works is because the content is super small to begin with.
The site is HTML5 with CSS and some CSS3.
The information is being pulled in from Entity/LINQ I assume I will need to limit the content there?
Here is one example:
db.TPGForums.Where(m => m.boardID == 11)
.SelectMany(m => m.TPGForumTopics)
.SelectMany(m => m.TPGForumPosts)
.OrderByDescending(p => p.dateCreated)
.FirstOrDefault();
Everything is wrapped in a <div class="news-block">content</div>
How can I achieve this?
EDIT:
Another issue that may cause problems is the content being pulled in is HTML Decoded. So only pulling part of it may cause some HTML Errors on the page with the possibility of some things not being closed properly. So I think my only option now is to limit it through the size of the div and hide the over flow.
You would need to limit the content where it is being pulled in. Alternatively you could set a max height with overflow hidden and use some sort of a gradient to keep the bottom edge from looking janky. Or you could use text-overflow: ellipsis.
I have a div with a scroll bar which displays 15 months with 3 of the min each row, When the page loads I want to fix the scroll bar position to 2nd row as shown in my screenshot.As in the scroll bar should to be fixed to the position shown in my screenshot as opposed to top of the div.The reason for this requirement is we are displaying previous 3 months, but the user should see the current month when the page loads. I hope I have made it clear
I am using
<div id="key_dates" style ="overflow:scroll;width:960px;height:500px">
Can you guys please help?
Thanks,
Adarsh
You need to use JavaScript for this:
<!--
Place this script before closing </body> tag so that
DOM (HTML elements tree) is already built when the script is running
-->
<script>
// create a closure to not pollute global scope
!function () {
// cache reference to keyDates element
var keyDates = document.getElementById('key_dates');
// set scroll to the height of one row
keyDates.scrollTop = 150; // substitute `150` with height of one row
} ();
<script>
Here is the documentation of element.scrollTop
If you are using jQuery, you do it like this (and here are the docs);
<script>
$('#key_dates').scrollTop( 150 );
</script>
An example with jQuery: http://jsfiddle.net/gryzzly/CjdwX/
It seems I can't demonstrate this properly with jsfiddle, but here is a sample of code which works if you test it in a browser. Using anchors on each row, we can anchor the window to a specified location either using href or the url.
For example, if you implemented this code at www.address.tld/calendar, to show row two, you'd enter www.address.tld/calendar#row2.
You can use only an anchor on row two, and you could place it either statically or programmatically depending on your needs. It's a pretty straight forward solution, but some people don't like the hash and anchor name being in the url. It doesn't bother me.
I decide to make read more... function by having two divs, and setting one of them display: none
but in this case i store all the data twice.
now the question -
If I have one div element, with style="display:none", which contains many big size images in it, is it have an influence on page opening time?
display:none does not prevent the hidden content from being loaded with the rest of the page.
If you want to make the page "lighter" at load time you can load the "read more.." content via Ajax on-demand.
The images would get fetched immediately even when the parent div is set to display: none.
If this is not your intention, and you do not want to go with the AJAX route, you may want to insert the images into the DOM only when the read more... button is clicked, as in the following example:
var hiddenDiv = document.getElementById("your-hidden-div-id");
var imageToLoad = document.createElement("img");
imageToLoad.setAttribute("src", "image1.png");
hiddenDiv.appendChild(imageToLoad);