I have a div that uses jQuery to expand / contract on a click. This works great for images but fails for embedded Youtube videos. Is there any way to get a click on a div that contains a video so that I might change the dimensions of the div?
Note: I intend to use this only to expand the div: once the div is expanded I will let the clicks to the div be caught by the Flash player as so not to interfere with the video controls.
Example fiddle. Note how difficult it is to click on the div containing the video in order to expand it.
i created an example here: http://jsfiddle.net/RASG/aZvqN/
see if you want something similar.
if not, you will have to setup a jsfiddle to help us help you :)
Related
I want to add and animation of if the user scroll down the website to a point, the hidden iframe show up one by one, how to do it in jQuery?
I found some solution, but it appeared at once, I want to make it one by one.
hi i made one myself look on https://github.com/ms123myrddin/mier the source code is free
I would like to get the effect of a zooming image when someone opens a new page. So each page should have it's own image that zooms in every time the page is opened. I have an example in this website: http://www.fashionclub70.be/ (Click the "light version").
If a user clicks on a menuitem the corresponding page is opened and the image zooms in. on this website it is done with Flash, but I would like to use only Javascript for this. I don't really have a working knowledge of Flash. Do you have some pointers for me so I can successfully implement this?
Thanks
Maarten
I guess the easiest solution would be to use something like this : http://sliderjs.org/. Basically, you would put an empty place holder and load your image to some invisible div element.
Then, kick off a transition effect with a callback bound to your image's onload event.
You could use a canvas and put a picture on it. Evertything you would need for this can be found here:
http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
Edit: If you want to use CSS3 you could use
#pix{width:200px;height:300px;transition: all 2s;}
#pic:hover{transform:scale(4) translate(100px,100px)}
This would make the div tagged with this id move to the right and become 4 times as large during a period of 2 seconds.
The :hover part is just an event that would make the transition tick. Guess you want to use :active instead.
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
I have a div area (for main slider. But there will not be sliding inside).
And under this div area there is a tab system.
In these tabs there are 1-6 images (In each tab there are another images (1 to 6 images)
When I click one of these images I want to show the related content / photo etc in this Div area above.
How can I do that? Any example? Any clue?
I tried to use jquery for show/hide, toggle etc but for example I couldnt find how to keep those big divs unvisible within my html (I tried css "display:none;" but that didn't seem to me wise enough) and call them in its place (above of the tab system)
P.S: when an image is shown the others must be hidden.
Here you are demyr obviously you will have to modify to your exact needs:
http://jsfiddle.net/S4LGr/1/
It is no problem here is the updated code, edit as you need you should really be able to take it from here:
http://jsfiddle.net/S4LGr/3/
I changed the images on this one so you can actuall see it happen, very similiar to ford.ca:
http://jsfiddle.net/S4LGr/5/
Here you go man all the pieces brought together:
http://jsfiddle.net/S4LGr/9/
totallyFeelLikeIdidYourHomeWork lol you owe me a beer!
you can bind a function on all images/text that loads the relevant images/text to the detail div. Like this fiddle: http://jsfiddle.net/9jc46/
I'm currently working on a small "dress-up" type feature for a friend's website, but have run into a logic issue.
The items that you may use to dress your avatar must be bought. Bought items are loaded on screen for users to click (as an image) and when clicked should create a jqueryui draggable inside a div. The problem I've run into, is I can't figure out how to make it create that exact image inside the div.
I guess what I'm looking for is a way to recreate the image clicked inside the div as a draggable. Anyone have suggestions?
Pseudo-code:
image.click(function() {
div.append($(this).clone());
});