I'm doing a Phonegap App with JQueryMobile.
The different pages have different Background Images (defined by jquery code) and I'm seeing a disturbing behavior when the user enter the page ONLY THE FIRST TIME.
The problem is it occurs a resizing of the image in the first second. That is, when the user enter the page it shows a resolution, and a second after, the image resize again. And after that I can exit and enter again that page and DOES NOT RESIZE.
The HTML that define the page:
<div id="pageHoja1" class="divPagina" data-role="page">
</div>
<div id="pageHoja2" class="divPagina" data-role="page">
</div>
<div id="pageHoja3" class="divPagina" data-role="page">
</div>
The CSS of that page changes dynamically:
In the on-device-ready:
$(".divPagina").css("background-size","cover");
On the function that decides the background image:
$("#pageHoja" + i).css("background-image", "url('mycharts/" + sFileBackg + "')");
Ideally I would like to NOT RESIZE AT ALL (because I want the original size). But if that is impossible, at least I want the resize to occur before it shows to the user.
I've already tried this but with same results... ;(
$.mobile.loadPage("#pageHoja" + i);
$("#pageHoja" + i).page(true);
and I've checked the CSS of background-size BEFORE and AFTER (with an alert message) and both gives "cover" value...
Any ideas? Thanks!
Related
I am using Dropzone code obtained from this web site
DropZoneCode
In this example the dropzone is the width of the entire screen. I would like to reduce that size down to about 400 to 500 pixel. When I reduced the size of the div I could only drop 2 files before it stopped uploading files. The 3rd file just opened in the browser, which I believe was an indication I was outside the dropzone.
I believe if I reduced the size of the icon showing in the drop zone I would be able to add more files. Can anyone tell me where within the css file I can adjust the size of those items?
I was able to get it working using this setup
<asp:Panel ID="pnlStealthStat" runat="server" Visible="false">
<div id="dZUpload" class="dropzone" style="height:auto;margin-top:5px;">
<div class="dz-default dz-message"> Drop Stealth Stats Files Here</div>
</div>
</asp:Panel>
This setup was part of a bootstrap column and is functioning as expect
I am working on a product page which has an Image gallery on the left and color selections on the right.
See the below image.
Now every time a color is selected a set of image has to be shown on the left. The way it is implemented right now is that every time the color selection is updated the store value for SelectedImages changes with the array of that particular color.
Now it makes sense that, whenever I switch to a new color the image is loaded. Which is happening.
But the issue I am facing is that whenever the color is changed, and the SelectedImages array is updated the images are loaded, no matter that they were loaded earlier. I don't want it to load again (send http) when it has already called the image once.
Also, I don't want to load all the images (4 color x 4 images = 16 Images) at once which would again be not performant.
I have created this UI using vue. It's not a vue single app, but it has vue component at some places where needed.
Code that renders Image.
<div class="desktop-gallery"
:class = "{ 'is_loading': isLoading }"
v-bind:style="parentStyle"
v-show="!onlyMobile">
<div class="gallery-item"
v-for="(image, index) in images" :key="index"
ref="variableGallery"
#click="handleGalleryZoom(index)"
>
<img :src="image"/>
</div>
</div>
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.
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 ;)
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>