i have button in a different color than the background and i want to turn the button into the whole page, but after that it shouldn't be clickable anymore, so after the click the button slowly turns into the whole page with the color spreading all over the page, i really hope i explained it correct.
I did a research on google about that, but couldn't find any matching results.
Also I'm new to JS, so please don't be upset if I don't know or don't understand any comments/answers.
Thanks
What you want is quite an advanced idea and it would not be done by actually turning the button into the page itself, but as an illusion.
If you want to animate something slowly, then I recommend looking into the css transition property.
Related
I'm trying to resolve a problem that I encountered with the creation of a tooltip interface in a website I'm developing. I constructed the tooltips with help of HTML, CSS and JavaScript. The script is pretty simple as you can see in the fiddle underneath, and is based on a toggle behaviour, on witch a trigger element open a pop-up tooltip.
jsFiddle
Now! My problem is that i can't figure out how to place the trigger on the top of everything so they are not hidden by the pop-ups! Let me explain. Since the pop-up, even when they are off, sometimes cover the trigger elemets they (the triggers) just result not clickable. is like they are hidden behind invisible pop-ups. Here is a link of how is right now online.
http://271116.lucamule.com/studio-1
I hope you can see the problem! Does anyone know how to resolve this?
You've changed the .pop-ups to "block" as soon as it initializes. $("div.pop-up").css({'display':'block','opacity':'0'})
If you want to show/hide, I would recommend using .fadeIn/.fadeOut: http://api.jquery.com/fadein/
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
I am unable to make it, I have used several things and I have wasted almost 2 days making this thing but still not get what my client wants
after seeing the image you might get the idea what I am looking for, I am trying to move the png image on click, what will happen is the png image on which a user click will take the place of previous png on front and the background will remain stable.
This is the link to the image:
http://tinypic.com/view.php?pic=9hj90h&s=8#.U1Shkld4Pcc
Thanks in advance.
are you searching for a carousel jquery plugin or are you trying to implement this yourself?
If you really want us to help, please provide a jsfiddle. I can only make assumptions and give some general advice; the background image should be a separate image from the images you want to translate (and make a transition). Each image needs its own click event (or an observer on the document). When the user clicks, find out which location the current image is at. Find the image the current image should be at. Get the location. Change the top/left style values of the image.
Of course, you will need a [browser-prefix]-transition: all 2s linear on each element that should transition
what i understand is that you want to basically set new css values to the image(-holder).
$('#yourelementid').animate(height= new_height, width=new_width, otherattr=new_attr)
if you already know the values you need it should be quite straight forward.
here is the man page for $.animate()
https://api.jquery.com/animate/
hint: in the site that you give as reference he uses a separate image to display on click rather to move the existing one to the center.
You can have an invisible element with absolute position on the center, and on click fill it with the selected image, and make it visible.
hope this helps
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.
Alright, so the title may not be the best way to describe what i am trying to do, but i am not sure quite how to phrase it.
To start of (when the page loads) there are 20 'tiles' which serve as buttons on a page. They are divs. The 5 on top are larger and the rest of the rows are the same size.
Once one of the buttons is clicked, i want a div to show under the row of the button that is clicked. I know how to do this part using jquery toggle. Here is an example of what i will want it to look like once a button is clicked.
You can see in the drawing how i want it to sort of look like a tab once it is clicked. I am having trouble thinking of how i am going to add the part that ties the button div into the div that is toggled in the middle of the rows. This part:
I sort of thought that i could make 5 images, one for each column of buttons, that has that little part of background color, and toggle the image as well. I believe that there is a better way to do this so i am looking for a steer in the right direction. I have had some trouble searching for something like this as I dont really know what to call it so i thought i would come here for help. Thanks!
I would increase the height of the tile when it is clicked (so that it expands down from the upper red line to the lower red line shown in the last image).
It can all be done just with CSS (using the checkbox hack in the same way I made this div to increase its height) or with JavaScript (if you want reliable behaviour for IE8 and especially IE7).
Like this fiddle :
http://jsfiddle.net/techunter/ph8vY/