I have a problem with some users on my application. These users modify the text size (with display option in browsers) and after, they send a bug to say the application doesn't work because the text is to small.
Is it possible in javascript to have an event when a user modify these options ?
How can I catch it ?
This jQuery plugin seems to do exactly this:
https://github.com/johnantoni/jquery.onfontresize
The idea of this plugin is to have an iframe sized in em and a script in the iframe that is triggered on onresize. So if the user changes the size of the font in the window the iframe is resized and gets an resize event. This event can then be passed to the parent.
The problem is that the plugin was not updated for 3 years but i don't think it would be a big deal to bring it up to date.
In addition you need to check for the correct font size on document ready.
EDIT I check it with current jQuery version and IE. The plugin triggers the event if the font size is changeable via View > Text Size (when the pages font size is set with em or %) it the pages font size is set with px then the size of the font is not changing hence no event is triggered.
Related
I am using Adobe Edge Animate to do some CSS3 animations, and using a plugin that converts the SVG images to tags so that the SVG elements are accessible via Javascript. The problem is, when one of the parent DIV containers is hidden and later re-shown, the embedded SVG image is reloaded losing any changes that have been made to it, such as fill colors of shapes, etc.
This also causes some stuttering in the animation when a new image is loaded, as it takes a small amount of time to reload the image.
This problem is not present in Firefox or IE. Is there any way to tell chrome to not re-load embedded images when hidden and shown?
Here is a link to the page in question: Link
If you press the enter key, it triggers part of the animation. You can see after the rotation where it switches out the image and flashes. If you use the built in function via browser console called changeBladeColor() you can see how it resets any changed attributes. This function changes the fill colors of the shapes in the SVG.
Here is an example usage for testing:
changeBladeColor(1, '#ff0000');
It seems the only solution is to position the elements off the page. I had to re-do a lot of my animation, so keep this in mind when doing any projects where you need to display and hide objects (especially ones that may not appear to be doing so).
I am developing a widget for mobile web - that contains several elements, like images icons and texts.
I am looking for a way to assure all stay in the same size when screen is in focus.
is there a way to tell have 20px icon have the same relative size on every zoom in?
You could use window.onresize, recalculate the target elements dimensions when the window dimensions change
JavaScript window resize event
so I have a set of images that on a big screen are not using the image slider. And when the screen goes below a certain width, the image slider is initiated.
At the moment, when I resize the window manually and play around dragging the size around it works well.
But, if I resize the window to a small size and hit F5 then what should happen is that the page automatically recognises that it needs to initiate the image slider. What does happen is that the images load like this below and not an interactive image slider.
So the problem is that if the page is already under 939 then the bxSlider functionality doesn't work. It will put the images into a bullet-pointed list as below without actually adding the interactivity. It will also not deactivate the bxSlider when the screen is resized to above 939.
It sounds like you're using the resize event to trigger your code. The reason that doesn't work when you refresh at a small size is that after the page loads, you don't resize it again, so the resize event doesn't fire.
Resizing only triggers when you manually grow/shrink the browser, without refreshing the page.
To fix it, just trigger your current function on first page load (I can't see the code here, but presumably it checks the current browser dimensions and updates the page accordingly? If so, entirely safe and sensible to run at the start of page load).
try changing this
$(window).resize(checkWidth);
to
$window.on('resize', function() {
checkWidth();
});
Can anyone point me in the direction of a jQuery slideshow/gallery plugin that matches these criteria (or can be customized to through setting its options)?
Can be inserted into a div - not a popup display
No border/thumbnails/filenames/buttons - when an element is being displayed, that's all you can see
I need to able able to set a max height and width for the gallery as a percentage of the page dimensions. If an image is being displayed, it needs to be re-sized to fit this whilst maintaining its aspect ratio.
Can display any type of element (although if it can only display images I'm still interested)
I've had a look at some plugins, but I can't find one that is suitable. Is there one? Thanks for reading.
You should look at Thickbox or lightbox.
You want to display it in a popup or not?
You can try Cycle plugin - I've used it many times and it's stable. For resizing the images according to the page's dimensions, you can do that before applying the plugin, either with PHP or jQuery.
What I'm trying to achieve is basically have a code that will morph (move around the page) based on the part of the window which is currently viewed.
Scenario:
actual page height : 2000px
actual screen height( pc, laptop whatever ) : 800px
1 image of 600px
3 div's or virtual boxes ( just to prove what I want to do )
Workflow
When you open the page, you'd see the first part of the page with the image loaded in the first div.
What I want and need to achieve is when scrolling the page, and the focus would be on the second div (or the image simply gets out of focus - you can't see it no more),
the image would move (disappear from the first box) and appear in the second one, which is currently visible.
The idea might seem pretty easy but I'm not JavaScript savvy.
Ideally, the answer should include a way to load a JavaScript instead of that image.
The way you use the word focus can be misleading, as focus is a JS event that happens after an element is clicked. You need to get familiar with the jQuery scroll event and scrollTop. Here is similar Thread here in StackOverflow that you may want to read Jquery / Javascript find first visible element after scroll