Normally a webpage load images is like scrolling down. I don't want the visitor's of my site to see it. I am looking for a script that will load my webpage and then it will show completely. I have already put a fadeIn effect but the images loading is scrolling and also my background image.
Questions:
Is there a script for that?
What is the best script to use? PHP or JavaScript?
this is one method, http://developer.yahoo.com/yui/examples/container/panel-loading.html
basically you can wrap the content in a hidden div, then unhide it in the body's onload event.
You could overlay your page with a "please wait..." div, and fade that out when the page is loaded. You could use JQuery's ready event to hide the div.
The downside of this is that users with JavaScript turned off would never see the page, but only the "please wait.." message.
To make it work for users with JavaScript turned as well, you would have to make the "please wait..." div visible using Javascript at a very early stage of the document's loading, which is very tricky to achieve. It might work if you put a <script> tag after the "please wait" div but before the actual page's content.
or you can add on page header small copy's of this images.. 1x1 px and fade it or hide or z-index -100/ browser will download this full-size images
Use this code:
<body onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'block';">
<div id="loading">Some loading text or icon goes here...</div>
<div id="content" style="display:none;">Main content goes here...</div>
Related
I'm working on a gallery type application - one template puts together a popup dialog for a larger view of thumbnail images when clicked. The server path to the image is included as a template variable.
Gallery.Templates.Popup = "\
<div class='popup'>\
<img class='popup-image' src='{{image-path}}' />\
<div class='name'>{{name}}</div>\
<div class='caption'>{{caption}}</div>\
<div class='dimensions'>{{dimensions}}</div>\
<div class='price'>{{price}}</div>\
</div> \
";
This works very well EXCEPT for the first time the image is loaded. The dialog is constructed and shown but at the time the html string is attached to the dom, it lacks the image. The problem it is causing is in positioning the dialog:
The dialog box is positioned in the middle of the screen like this:
left = window.width /2 - dialog.width/2
But since the image is not present, the dialog.width variable is incorrect. Again, this only happens the first time a thumbnail is clicked, I'm guessing the image is cached for subsequent clicks.
Would this be handled by prefetching the images somehow? If so, do they need to be attached to the dom in order to be cached or can I just load them in an array?
Many Thanks !
If you can get the image size ahead of time from the server, you could use that to help you size the '.popup' div appropriately.
It sounds like a bad idea to prefetch images if they aren't needed and I can't think of a way to ensure that a specific image is loaded before it's html is generated programmatically.
Rather than add Pin It buttons through our site, I would like to simply control what images show up in Pinterest's "Find Image" results if a user decides to pin one of our URLs.
As of now, "Find Images" allows the user to scroll through the images it finds on the page so they can select which image to pin. The "found" images start with the first jpg in the html file, I'm assuming (could that be a bad assumption??). On our site, this forces a user to scroll through about 15 navigation and promotion images before arriving at the featured product image. Is there any way to specify this image to show first in those results? Maybe through a meta tag, or by adding a class or id to the element?
Without a public Pinterest API, this seems like just guesswork, but I wanted to see if anyone else has run into this, or solved this. Thanks.
A lot of search results including the Pinterest Help Center talk about using nopin in HTML elements, which is invalid HTML. What they don't document is a data attribute to the same (well formed) effect.
<img src="foobar" data-pin-nopin="true" />
Adding the nopin attribute will exclude the image from appearing on Pinterest:
<img src="..." nopin>
I solved this by simply loading the image before all others in the page. In this case, I gave it width="0" and height="0" (you could also give it style="position: absolute; left: -9999px; top: 0;" just to be sure).
This won't break the page layout, but will force Pinterest to find this image first. The only downside is that the browser will load the page a few milliseconds slower, but if you're reusing this image later in the page anyway, you should make up for lost time then.
Pinterest will find any images from <img> tags (it will ignore CSS background images) that are at least 80px x 80px.
The order the images show up on in the Pinterest list is determined by the order they are specified in the HTML.
As you have discovered, you can alter the CSS of an image to "hide it" without actually hiding it by either moving it off the page with absolute positioning or 0 height and width. Any images that are set to display: none will not be picked up by Pinterest.
You can instruct the share preview to only grab specific images from the page by using the “image_include” configuration option. First, set image_include to your desired class name (id selectors are not allowed, only class selectors), then add that same class name to each of the images on the page that should be grabbed. For image_include, don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_include: "at_include"
}
</script>
Once image_include has been defined with a class, add that class to the desired images on the page. In this example, the only images on the page that will be grabbed, will be the images with the at_include class (img1.jpg and img3.jpg).
<img src="http://www.example.com/img1.jpg" class="at_include" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_include" />
I was reading this blog which suggests the following:
Use the global no pin flag to prevent pinning on the whole site
Manually add the Pin It widget to those images you want to make pin-able.
Given Pinterest's webmaster tools appear to only have a blacklist, rather than a whitelist option (that you are seeking), this could be a possible solution. Another stated benefit of this is you can also supply suggested pin text through the Pin It widget.
Only downside to this I guess is that it may break the user's own Pin tools. Pinterest does allow you to supply a custom "denied" message, so I guess you can say "please use our site's pin buttons directly".
I've tried this, and it works. It seems like a decent approach, at least until Pinterest sees fit to add some better tools, such as an image whitelist option. The main drawback is needing to add Pin-it buttons on every image you want to enable for your users & your users may be annoyed that they can't pin anything.
Unfortunately, there is no way to mark several images on your page as preferred, but you can mark one image to stay at the top of your images when someone pin it. Specify this meta-tag in <head>:
<meta property="og:image" content="http://YOUR-DOMAIN.com/IMAGE.jpg"/>
I have not found official confirmation for this feature, but it works great with addthis sharing plugin.
Add this script before the actual call to pinterest. And set images that you do not want to show with a class called 'nopin'
<script type="text/javascript">
var addthis_config =
{
image_exclude:'nopin'
}
</script>
<div id="toolbox" class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_pinterest"></a>
</div>
</div>
If anyone is using AddThis, please check this thread: http://support.addthis.com/customer/portal/questions/1570789
AddThis has some, uh, unique functionality that affects the image picker presented. As in, when there is only one image on the page, it ignores the defined og:image.
If you set that lone image to be excluded, then the image picker won't show any images for selection.
With the Windows Phone 7 Browser, when the user clicks a link, it is shaded with a gray rectangle for approximately 0.5 seconds. This is fine in generally, however, if you have dynamic page behaviour, for example, clicking a link updates the DOM so that the link is no longer visible, the opaque gray rectangle lingers on the screen after the link itself has gone.
This looks pretty horrible!
Does anyone know how to disable this effect?
Add a meta tag in you head section in you html file.
<meta name="msapplication-tap-highlight" content="no" />
It should work.
The following solution seems to work (at least on the emulator). The gray shading needs the dimensions of the clicked element. If the element has zero width then there is no shading, while clicking the child elements still fires the element's click handler.
<div id="myLink" style="float:left">
<img src="images/myLinkIcon.png" style="position:absolute" />
<span style="position:absolute;left:50px">Click here</span>
</div>
<script>
// jQuery
$(function () {
$("#myLink").click(function () {
console.log("clicked on myLink");
});
});
</script>
The div can either float or be absolutely positioned. The child elements have to be absolutely positioned, otherwise the div acquires a width.
This works try using jquery
$(id|classname|document).live('click',function(){
//write code that needs to executed in this area
});
I have used this in my project. It works fine to hide the grey shade, avoid using inline function in html pages ... using jquery this function works only when inner content is assigned to it.. eg
<div id="d1"><div id="d2"></div></div>
you can this for inner div like this
$('#d2").live('click',function(){changecolor();changebackground();});
enjoy coding........jquery
The solution is to make 2 DIVs. Main div dont have width/height and this DIV is firing event and DIV inside have got size.
I've made with my friends working example inside phonegap project. Check link: https://github.com/sellupp/cordova-for-windows-phone-7-antidepressant
You are looking for: 1. gray area on tap
We're also handling problem with low responsivenes time. Check it out ;)
I am using Joomla 1.5.22 with Mootools 1.1. I have a module with a form contained in a hidden div that I want to open in Joomla's built in modal box. The problem I have is that when I click the link the form opens in the modal box, but it also opens the div in the module on the page.
HTML:
<div id="moduleBox">
<div id="clickMeButton"><a id="formClick" class="modal" href="#hiddenForm">Click me</a></div>
<div id="hiddenForm">
form code goes here
</div>
</div>
Javascript:
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('hiddenForm').setStyle('display','block');
});
});
So how do I get the form to only show up in the modal box?
You can see what I am talking about here - http://www.internextion.com/
It's the Call Back Module. I already added the handler: 'adopt' as suggested below, now the result is a little different. The target div still shows up below the link, but now the modal window contains the link rather than the target.
I think this uses Harald's SqueezeBox - in which case, you are looking at the following scenarios:
find the target div and CLONE it to insert into the modal box.
find the target div and ADOPT it into the modal box.
you are seeing the first (default) case. to achieve the second effect, add:
handler: 'adopt'
to the instantiation options. more here: http://digitarald.de/project/squeezebox/1-1/showcase/get-elements/
Option 1:
If you look at the html code (in firebug) for the overlay div you will see that it makes a "copy" of html and places inside the overlay container with id="sbox-content". In theory if you add a CSS like below +/-, it will hide the link and display everything else. This might be the simplest and easiest solution.
div#sbox-content > a#formClick{
display: none;
}
Option 2:
If option 1 does not work for some reason, you can try playing with CSS and hide the link when the Modal box opens and then making it visible when it closes.
Modify the JS to add a class instead of modifying the style.
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('formClick').addClass('hidden');
$('hiddenForm').setStyle('display','block');
});
});
Load additional CSS that will make the link invisible
div#clickMeButton.hidden {
display: none;
}
Then you will have to overload closing event and make the link visible...
Ok, so I finally got it to work with a combination of the other answers given. First, I removed the javascript click event to make the form appear, that solved the issue of the form showing up below the link. Next, I added new CSS for the hiddenForm ID within the modal box and set that to display:block. It appears that the default handler behavior (in Joomla at least) is to adopt the content since I have removed the handler: 'adopt' and it is still adopting the content.
I knew it was something simple, thanks for the help!
BTW - the link is still live, you can see the correct behavior on the demo site. Now all I need to do is add some fancy AJAX form submission and it will be ready for prime time.
So I have add to cart button, which is comprised of an anchor tag that has an image tag inside it. The anchor tag is using a bunch of javascript effects for mouseover etc that does image swap of this image in question etc.
Now, I have a function "AddCartButton" in my codebehind class that handles click event of this anchor tag. This obviously does not work when javascript is disabled. So I replaced the img tag inside the anchor tag with control, but Those swappings are not working for my though.
What are my options? I want the click to be handled by my C# function irrespective of whether javascript is enabled, and I want the mouseover effect when javascript is enabled.
P.S. It is a repost, but there was only 1 view or something for last post, so I changed the title a lil bit.
<div>
<a id = "addcartButton" href = "#" runat = "server" onMouseOut="MM_swapImgRestore()" onserverclick = "AddCartButton" onMouseOver="MM_swapImage('Image1111111111','','../_images/b_addCart_f2.gif',1)">
<img runat = "server" src='../_images/b_addCart.gif' AlternateText="Add to Cart" name="Image1111111111" width="106" height="29" border="0" />
</a>
</div>
So basically I want something that is working even when javascript is disabled. I still want all those mouseover effects etc when javascript is availabel though.
have you looked at ImageButton class?
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.imagebutton.aspx