I want an animation modal (loading please wait) and when the page fully loads it disappears?
Using jQuery:
$(function() { $('#loading').fadeOut(); });
The rest is CSS and an animated GIF.
If you're using jQuery, try something like this:
$(function() {
var reqMgr = Sys.WebForms.PageRequestManager.getInstance();
reqMgr.add_beginRequest(ShowWait);
reqMgr.add_endRequest(HideWait);
});
function ShowWait() {
$("#Loading").fadeIn();
}
function HideWait() {
$("#Loading").fadeOut();
}
Then just have an element:
<div id="Loading">Loading, Please Wait...</div>
Style and position as you want with css, default it to have a display: none; though.
I recommend to write some simple html with your loading message (and may be a page mask to make it grayed) and place it at the beginning of the page. And at the end of page add script to remove that message and mask (see first answer). So users will see this message as soon as they get the html page (also some browsers support rendering of incomplete pages during loading of the page). See the code of this page for additional details.
This is my favorite way to make a modal popup. It does not use any AJAX, it's just pure HTML & CSS: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
You can hook it up to code-behind instead of using hyperlinks (get rid of the opacity attribute and work with div.visble = true/false). Set the modal div visible as default, then when page load completes, set it to visible=false.
Related
I'm getting a little confused by a CSS question I've got on a WP site I'm working on.
There's a theme installed which always includes a header class on each new page (.title-banner) and I want to hide this on this one specific page. I don't have access to the stylesheets so I just wanted to use CSS to hide the element on this one page, using display: none;, however it won't work if I put it within a tag directly on my page. If I apply the CSS in the inspect tool, it does however work.
Is there a way I can get this to register by using on-page CSS rather than within the stylesheet, as this isn't an option? I know display: none; and !important isn't ideal but I don't know any other way to achieve this.
You need to be more specific to override existing CSS.
You can add this to your theme, or by going to "Appearance > Customize > Additional CSS" from your wp-admin.
Replace the Page ID with the page ID of your page... You can find it by looking at the admin page ID, or inspecting the <body> tag. Wordpress puts the page-id-xxx class in the body of every page, allowing you to override specific CSS on a page by page basis.
/* Replace Page ID with your page id */
.page-id-336 .title-banner {
display: none;
}
Use this;
<script>
window.addEventListener("load", function(){
document.getElementsByClassName('class_of_your_element').style.display = 'none !important';
});
</script>
You should try Javascript. I think your CSS styles are getting overridden by some default ones.
Use this;
<script>
document.querySelector('.title-banner').style.display = 'none';
</script>
I have 3 columns: left center right and would like to drop loading the left when the #media screen maxwidth less than 768px.
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
I don't want to use display:none to just hide the column but to prevent it from loading, so it doesn't have to run server code that might slow things down.
What's the best elegant way to do that ?
CSS cannot prevent regular HTML content from loading and the server cannot know whether a media query matches.
You can get the matching media query using JavaScript (window.matchMedia("only screen and (min-width: 480px)")) and then load the content that you want from the server (using AJAX, or by navigating to a URL, with, say, ?screen-width=1024 appended to it).
It is not elegant, it is pretty ugly and not dynamic at all (unless you check this for every page load and if the query string does not match the media query that matches this session, you change the query string and reload the page), but it should work.
You can't detect the page width of the client from the server.
if you wanted the server to the div then you would first need to call a page that captures the screen width and then passes it to the server in a request for your page:
Example javascript (using JQuery):
window.location.href = 'www.site.com/mypage.php?page_width=' + $(window).width();
This could then be accessed in php through $_GET['page_width']
Alternatively you could do the whole thing in JavaScript which would be a good and dynamic way to handle it that would also take account of resizing of the browser window during page use.
I would strongly recommend using a library like JQuery as it makes your code much neater and is very powerful. This can simply be done using the following line of code: (for a web connected site, if it is for local use you would need to download the file locally)
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
Then it would be a simple matter of inserting the following code:
$(function(){
if($(window).width() < 768){
$('div.left').hide();
}
});
The $(function(){ }); runs the code when the page has loaded.
If you wanted it to work when the page was resized as well then you could put that inside a function
function checkSize(){
if($(window).width() < 768){
$('div.left').hide();
}else{
$('div.left').show();
}
}
and call it when the page is loaded and when the screen is resized, like so:
$(function(){
checkSize();
});
$( window ).resize(function() {
checkSize();
});
It's not really elegant, but you could make the entire div a string and put it in an if statement within a script block. that way you check the window size and if it's not big enough, it just skips over all that html:
<script>
if ($(window).width() > 768) {
$("body").prepend("<div class='left'> Whatever stuff is in your div </div>");
}
</script>
Here is a Fiddle, to show my current state: (attempting onClick())
http://jsfiddle.net/D5N4f/7/
$('.associationLinks').click(function () {
alert("I've been clicked"); //test to see if click is working
//$(this).next().toggle();
$(this.content).toggle();
//$(this .content').css("display", "block");
});
here is a version of the working HOVER, that I need to convert to onClick:
http://jsfiddle.net/D5N4f/6/
This is working fine.. however.. on HOVER is just not practical for my use.. I need to change it to onClick..but have the same behavior.
Do I need to use jQuery for this? (I havent been able to get it to work)
the content I want displayed starts off as display:none..
I have tried to show(), toggle() and even .css("display", "block"); (maybe Im not targeting things correctly?)
the last part of this (since there will be MANY links set-up like this) is to close the previous 'SHOW' content.. when I click on a new link.. (ie: only having one content box displayed at a time vs. having several open at same time!)
Please use the fiddle example instead of just random code suggestions! Thanks!
I removed the following CSS:
/*.associationLinks:hover .content {
display:block;
}*/
I also use a .children() selector to get the content div to display, and I change it's CSS on a click.
Is this closer to what you want? Hiding the image is a bit tricker, and I have an idea for that but I'm not sure if you need it.
On the website I am currently working on I have a div that loads slowly causing the page to load slowly but also jump as not all the positions elements load until after this slow div does. I cannot control the contents of this div as the content from the div comes from an external source.
So I was wondering if I could move the contents of this div to the bottom of my code so that it loads after the rest of my page whilst still keeping the position of the content on the same place on the webpage? Similar to what people do with some java script code.
Like Sergey said do something like this
javascript in the head
window.onLoad = function() { switchDivs(); }
HTML above where you want the content
<div id="whereYouWantIt"></div>
More HTML for the rest of your page
<div id="contentIsInHere"></div>
javascript here for function that switches the content around. Optionally call an external script here that contains this function.
<script>
function switchDivs() {
document.getElementById("whereYouWantIt").innerHTML = document.getElementById("contentIsInHere").innerHTML;
document.getElementById("contentIsInHere").innerHTML = "";
document.getElementById("whereYouWantIt").style.display = "inline";
}
</script>
</body>
CSS
#whereYouWantIt {
display:none;
other styles ...
}
#contentIsInHere {
display:none;
no other styles needed
}
You can use CSS to position the div and have it in the end. Or javascript is actually is good idea, load the content in a window.onload() function.
You can locate 2 divs - one where it should be and second in the bottom of page. Both of elements should have initially display none. After page will be loaded copy inner content of "pseudo" div by using JavaScript to the div you needed and make display block for this.
I built a WordPress plugin for my company's customers and one of the options uses an iframe. A customer pointed out an interesting issue to me. When the page loads, it doesn't load at the top but loads just above the iframe (please see: http://salondshayn.com/wp/staff/jude-hair-stylist-hairdresser-scottsdale/). The same thing happens on my test site, and in all browsers I've tested (i.e., chrome and firefox).
I've narrowed it down to the iframe, but it may also have something to do with the way WordPress treats iframes. This question is similar, but the answer given is to set display: none; which doesn't work because I need the iframe's contents to display.
Any suggestions?
Use the scrollTo function and put this bit of javascript at the end of your page.
I took this from Scrolling an iframe with javascript?
var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(xcoord,ycoord);
}
If jQuery is involved, you can use this:
<script type="text/javascript">
$(document).ready(function () {
window.scrollTo(0,0);
});
</script>
I'd extend the scrollTo issue pointed by #stevepowell2000 and suggest that you examine all the scripts of that iframe, much probably there's a scrollTo going on there.
I found this in the iframe source, but am not sure if it's related or not...
$("#siteMasterPage").live('pageshow', function(event) {
var currentArea = $('#hidCurrentArea').val();
if (currentArea === "business") {
setTimeout(function() {
$.mobile.silentScroll(30);
}, 10);
}
});
If that's indeed the case, the matter would be how to prevent that, because applying a second scroll will probably look weird.
I ended up finding (two weeks later) the answer to this question. I took it from Nate's answer here - iframe on the page bottom: avoid automatic scroll of the page
I used:
<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" href="..."></iframe>
It seems to have completely eliminated the scrolling issue.
Here was Nate's quote:
Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.