On my website I am trying to slide left/right box away. The box is quite big, because has tons of small pictures and another elements inside. And is downloaded via ajax. The situation with sliding up/down is exactly the same. (so let's work with that, because it's easier to use - without animate or jquery UI).
When I try to slideUp() the element doesn't slide at all but hides. It all takes almost about one second. I tried to put there a simple div of same height and width and I was able to slide that element without any troubles. So my theory is, that the div is simply too big for messing with it like that. Is that possible? Or the problem is somewhere else?
If I am right, don't you have any ideas how to omit that, but make some nice effect?
I think that your answer is there in your question, when you say that you have got it to work successfully with a simple div of the same height etc. It sounds to me that you are asking a lot of the rendering engine, which will have to re-render each of these images, in each incremental position as it slides up off the page.
Javascript engines in the latest browsers are much better than they used to be, but they can only do so much. Combine that with the browser having to render each step of the transition, I am not surprised that it takes so long.
Is the animation really necessary? If so, you could perhaps do it in a number of stages:
Quickly remove all of the content of the div
Animate the large div to slide up or shrink to a small one and disappear
Related
Im currently building a practice responsive website, what I am doing is taking an exising website, building it up using twitter bootsrap js and css, meaning it will be fully responsive for mobile.
The issue is that there are some large carousels and images on the site. Ideally I would like to just completely remove certain elements, like a carousel for instance, and instead have the options within the carousel as a standard list menu.
It seems the main option is display:none based on media queries, but I am starting to foresee that I will run into big problems for loading time if the entire desktop site is still going to be loaded on the mobile, only elements hidden.
Are there ways to completely exclude html based on browser size? If anyone has any good links or articles that would be great. Or even just opinions, on whether there is actually need to exclude html or not.
Thank you
First off it is really good to see that although you're talking about display:none; you actually still want to display the content without the bells and whistles of the image. Well done you.
The next thing I would look at is if you don't want to load images for a mobile then why are you adding it for the larger sites. If the image isn't providing a function, assisting in explaining the content better, then why not just drop it for the desktop size as well?
If in fact it does help tell a story then you can include the images and some of the popular image services like adaptive images, hiSRC, or PictureFill which will serve the mobile version of the image first and replace with a larger image at higher viewports (but remember, there's no bandwidth test).
Finally, if you do want to serve some different content, then take the advice of fire around including more content with ajax. The South Street toolbox from Filament group can help you out, pay particular attention to the AjaxInclude pattern (it also has a link to the picturefill).
You could consider storing heavy data JSON-encoded, and then creating elements and loading them on demand like so
var heavyImage = new Image();
heavyImage.src=imageList[id];
Then you can append image element to a desired block. From my experience with mobiles this is more robust than requesting <img> via AJAX, since AJAX could be pretty slow sometimes.
You may also 'prefetch' images with this method (like 2-3 adjacent to visible at the moment), thus improving UX.
You could pull in the heavy elements via AJAX so they wouldn't sit on the page initially, making it load faster. You could decide to do the AJAX call only if the screen size is larger than X.
If you want you can use visibility:hidden, or if you use jQuery you can use
$(element).remove() //to remove completely
$(element).hide() //to hide
$(element).fadeOut(1) //to fadeout
I am trying different methods to turn an image into divs that represent each pixel.
One method has been using php imagecolorat to create divs with a background-color which works well.
However what if I had thousands of divs width:1px;height:1px; each with the same css background-image with incremented background position?
What performance hit would this have? Ie: does the browser draw the entire image many times or only the section that is visible as the background? Note the original image is several hundred kb.
Thanks
Only the section of the image should be drawn, however the drawing operation will be called as many times as the amount of pixels, so that will be a performance hit. Did you try writing any test code and measuring how it works?
Thousands of divs will hurt your performance no matter what, because the browser has to parse each div, add it to the DOM, then render it.
The actual performance will be different on different browsers. Only the part of the image being requested will be drawn, but the rendering function that draws the image will be called for EVERY div. It's more or less whether the specific browser's implementation can render one pixel of an image faster or parse a string and print the image. If the browser has the image in-memory, the difference might be moot. But if the browser has to open the image file every time, then the disk access will kill you.
That being said, I'm willing to bet there are better ways of doing what you are trying to do. You can get the pixel the mouse clicked/hovered/etc using JavaScript, and then add an absolute div at that specific point to create the "filter" you are talking about. Furthermore, if two pixels next to each other get tagged, you can just expand the former div, rather than creating a new one, which will help the performance by a lot
In other words, look into just loading the image with an img tag, and then using JavaScript to do what you are trying to do.
Can we measure height of a div using php?
This is not possible at all: PHP serves HTML code. The browser renders it. Only after it is rendered, can height be determined reliably. Different browsers may end up with different heights. Different user settings (like font size) may end up with different heights.
The only way to find out an element's height is using JavaScript which runs in the browser. You can theoretically send the results back to a separate PHP script using Ajax, but I doubt that'll make much sense.
You could use jQuery's .height() like so:
var height = $("#elementID").height();
(there are native JavaScript approaches to this as well, but they tend to be a bit long and complicated.)
As others have said here, you cannot use PHP to read the height/width of a div already rendered. However, aside from the javascript options already presented keep in mind that you can use PHP to set the height/width of a div before it is sent to the browser. This would be in the form of an inline style of course. This is not the most elegant solution and to be honest I would avoid it, but you did not state what specifically it is that you want to do, and why.
Not sure if that info will help you in your implementation but it wasn't mentioned so far and thought I would contribute it.
No, we cannot. div is rendered by a browser based on CSS/JS. in a different browsers it can be different (IE, Firefox). It does not depends of PHP.
In case you are using text inside the div you could use strlen() to have some kind of measurement of height. I am saying some kind ofcourse because you are just counting the number of characters which then can be equated to some height depending on the font-size of the text, the line-height, the width of the div.
Lets say one screenheight can output 2000 characters on your website
If you count 4000 characters you have 2 screenheigths.
954 characters = almost half of a screenheight ...
i have used this method once to calculate the amount of ads i could implement in the sidebanners on a blog styled website with mainly textcontent on it ...
The height of a vertical ad was about one screenheight. If the text that needed to be outputted was 7000 characters i knew i had room for 3 ads ...
I have a php form. After this form is submitted, if all data is valid, then it executes a python script which takes 5-10 seconds. For this wait period I would like to have a progress bar (.gif) displaying in the middle of the screen. If I could also 'fade away' the background so that the progress bar was like a top layer and the background a back layer, that would be great.
Thanks.
Are you using any javascript libraries, such as jQuery? In any of the libraries, I'd imagine there'd be a dozen or so lightbox plugins floating about. Even if you don't want to use a library, you can take a look at their code, and instead of displaying a DIV, just display your gif, if you know what I mean.
There are even some plugins built specifically for this purpose, such as the BlockUI plugin for jQuery.
The basic algorithm for doing what you want goes like this:
Start Ajax Request
Display semi-transparent dark image over the whole page, with an animated gif in the middle.
Listen for Ajax response
Remove the overlay and loader gif.
I assume you already have steps 1 and 3 going alright. Step 4 is easy-peasy. Step 2 however isn't as easy, but still shouldn't be too hard. I couldn't tell you the code to do it myself, since I've just used lightbox plugins in the past. Take a look on Google for "simple lightbox" or something like that, since all you really want is the most basic functionality. This blog post talks about a CSS-only lightbox which would be a good starting point to help you style the overlay.
I have a website (using PHP). The main background is of green color and content area is of white. While switching to one page to another (as it takes a few milliseconds) the background color gives a flash before the white takes it over. I think its because of the way the dom element being drawn/created. I tried using ob_start(); and ob_flush(); but not much of a help.
Is there any way to avoid this?
Thanks
JJ
You might try explicitly setting a size (height and width) or min-height for the content area. You can also use a background image that has the white area. If your background is a solid color (or a horizontal gradient), you can use a 1px high gif that would be a very small file size. But you still might have a blink before the background loaded the first time.
Ultimately, I think users are used to seeing this. I don't think it's a big problem and wouldn't spend a lot of time trying to solve it. But maybe your boss disagrees.
Just a guess, but in your CSS, put the two rules in one CSS file, then the content area style declaration first, and make sure this CSS file loads before any others.
I don't know if it is the case, but I saw that to avoid the flickering problem of not stylized elements in IE, somebody added an empty script tag as
<script type="text/javascript">//This is necessary to avoid flickering of not stylized items in IE</script>
I personally quite like the flash. It lets me know a new page has actually loaded. It’s feedback.
An old colleague introduced me to a little-known Internet Explorer <meta> tag... thing that lets you do, amongst other things, a fade transition between pages, e.g.
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
It’s IE-only.