The property I want to implement is like the one Facebook's user posts have. When they are clicked they get bigger and the screen gets darker a bit.
I am open to any critic and help. Thank you!
You can add a jquery listener to the box for .on('click'...) and inside the function add a $(this).css(width: x px; height: x px)
This would allow you to fire the event to change the css.
Link to jquery site for CSS changes.
http://api.jquery.com/css/
For the background you will just need to change the dom css using jquery selectors.
If you want it more like facebook you'll also need to change the div to float to allow it to show up on top of everything.
Related
I have a site where I want to be able to show or hide a div based on both user input (clicking/tapping a button) and screen size:
a) If the screen width is greater than a certain size, show the div but allow the user to hide it.
b) If the screen with is less than a certain size, hide the div but allow the user to reveal it.
What I'm struggling with is getting these two requirements to interact properly.
I'm using Foundation 5 and jQuery, so both parts of this are possible - Foundation's "show-for-foo-up" handles initial visibility, and there are numerous jQuery functions that allow a div to be toggled between visible and hidden. But what I can't seem to do is find a way to allow a user click to reveal a div that has initially been hidden by Foundation's media query, or a way to do a pure jQuery toggle (ignoring Foundation) that sets the initial visibility according to screen size.
What makes this more complex is that the div contains a form. So I can't simply repeat it in two different divs and toggle between them, as doing that would either mean duplicate element ids or two different forms, both of which aren't possible in this scenario.
Does anyone have any suggestions? I'm open to either a jQuery solution, a Foundation solution or a pure javascript solution, just so long as it works!
Yes, CBroe's comment put me on the right track and my assumption thereafter was correct. All it needs is to use jQuery to alter the class of the div to add or remove the class which uses a media query. Dunno why I didn't think of this before, really.
I'm looking for some code which allows to scroll just through whole images on my landing page.
I don't really know how to explan but it's exactly the style on tesla.com. Every scroll on the mousewheel scrolls down one whole image.
How can you make something like this in Css & Javascript?
Best regards,
andy
Surely you can find bunch of working code around, but if you want to create your own you can follow these steps to begin.
Create divs with 100% width and height and position:absolute;
top:0; left:0; transform:translateY(100%).
Your divs will need some status flags like active, hidden, next, prev. Create animations with css or javascript which visually animate the divs but also change and handle these flags.
i.e. transform:translateY(0); to show a div and transform:translateY(100%); to hide a div back again. (This animations are completely up to you)
Finally bind these animation to window scroll event with javascript. If you want you can't bind these to other events like keypress, touch etc.
Now, I got it, what you want you use in your app.
You want to scroll through the whole page with an multiple image in the background should be changed on-scroll.
It can be done nicely using background-image property in CSS some Javascript.
See this demo - Change background image on-scroll.
Use this, it will work like charm.
Here's some more details - due to some weird restrictions with the YouTube API, I am forced to push a container off the page to give the impression of hiding the container.
I achieve this by using this class:
.my_hide{
margin-left:-9999px;
position:fixed !important;
}
And by using the JQuery methods $("player-list_container").removeClass("my_hide") and $("player-list_container").addClass("my_hide") to control the toggling.
However, the toggling looks jaunty, and the container jumps up once the class is removed. I want to be able to transition smoothly from one state to the other, and am at a loss for how to do it.
This behaviour can be demonstrated here
Add a video by typing in and searching for anything, and then hit the Play button located below. You should observe the behaviour described.
Iam assuming you 'are not able to'/'not want to' manually hide the container but want to change its position so that it is outside the boundaries of the page and it looks hidden.
In that case changing the position property will definitely give you a jumpy instead of a smooth effect since this affects the whole layout of the page (Read more). What you can instead do is change its position using CSS3 animation's translate property.
Here's a demo I've coded which does exactly what you want.
http://codepen.io/anon/pen/EgcIi
The "Click me" button toggles between taking the container off and on the page and it does it smoothly. You can also adjust the time which it takes to change the position of container. (As of now its 500ms)
I want it to look like the container is fading in in position meaning I would have to get the container to that position before using any type of animation function.
Then, don't throw the element way off the page with CSS. Leave it where it is, and hide it with .hide(). Then fade it in with .fadeIn().
You'll need to manually size the container, as it won't expand to contain a hidden element.
On my screen it just popped up. Im not 100% sure what type of pop in effect you want but that said, check out http://api.jquery.com/animate/
i was going to code up an example but that page has a bunch!
good luck!
PS: scroll down for all the visual animation examples.
Here is some sample code:
$('#myBtn').click(function(){
$( '.ytv' ).fadeTo( "fast", Math.random() );
//add animation code here;
});
check out a rough fiddle.
edit: heres a rough example: http://jsfiddle.net/somdow/Lef9n/2/
just click the red area to the right of the video
Animate function in jQuery wll help you
I have a normale jpg-photo and 2 textlink. When the user mouseover textlink 1 I would like to show a transparent png-photo on top of the jpg-photo, and when the user mouseover textlink 2, I would like to show another png-photo on top of the jpg. On mouseout the png should disappear again.
Possible? And can it be done with CSS alone or do I need javascript to?
Thanks in advanced.
Yes it is possible with JQuery, JS or CSS, depending on your requirements.
Good script to use is here:
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
You can use hover CSS selector to solve such kind of problems depending upon html layout of your page
#11:hover img {
display:inline:
Add other blocks
}
Your request can be done easily using the power of jQuery :)
I made something using jQuery and you can find it here
http://jsfiddle.net/xrmqq/
It is close to what you want to do.
i'm trying to implement something like a door bell in a webpage. I have a background image of a door inside a div and I want to add an image of a doorbell that is clickable. I would also like to change the image in the button when it is currently clicked.
I tried using image buttons techniques i've found on the web which uses something like this:
<a id="bell" class="button" href="#"><span></span></a>
the anchor tag has a background property in the CSS which is the button image. But I cannot resize it with percentages. I want the door and door bell to resize according to page percentage. What's the best way to do this?
anchor elements aren't block level elements by default, if you set css on your anchor elements to display:block; you'll be able to its size in %. That said, without seeing exactly what you're trying to achieve it's difficult to give the best guidance - remember to ensure your mark up is semantically correct as 'button' elements may be more appropriate over anchor elements.