I'm using jQuery Mobile, to create a small mobile app. I have a page which includes just a GIF. Though the GIF can be clickable, to move to the next page. But the point is that the GIF is not full screen in some devices, so I added some CSS to make it full screen, meaning to stretch it, which works, but then it makes the div (or GIF) unclickable. So I cannot click it to move to the next page, you need to wait for the animation to finish.
Here is how the page is defined in HTML:
<div id="correctGIF" data-role="page" data-add-back-btn="false">
<img src="images/Correct1.gif">
</div>
I added this CSS:
#correctGIF {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: -1;
}
#correctGIF > img {
width: 100%;
height: 100%;
}
Is there any way, how can I stretch the GIF to make it cover the whole screen, without making it unclickable?
It is z-index problem. Because you set z-index: -1; so that the div is unclickable. Change z-index to postive integer or remove z-index in css
Related
I have two fixed elements, one of which can either have
display: block or display: none. The other fixed element is always going to be visible. I want the elements to stick to the top of the website, while having them not overlay each other.
The only proposed solution I found is in these questions:
How to position a fixed div under another fixed div?
Fixed element below fixed element without JS
Put your two divs inside another container div and set that one as
fixed.
I can't do that however, as both of these elements are on different positions in the code, which I am not able to change.
Here's a code snippet demonstrating my problem:
nav,
.secondmenu {
position: fixed;
height: 120px;
opacity: 1;
top: 0;
width: 100%;
background: lightgrey;
}
.secondmenu {
height: 50px;
background: grey;
opacity: 1;
z-index: 2;
}
body {
height: 1000px;
}
<div class="secondmenu">Might be there or not and overlays the other navigation</div>
<div>Some other stuff separating the two from each other with relative position</div>
<nav></nav>
What I want and things to keep in mind:
If both elements are visible, they should be fixed on top of the page, while one is below the other
If only the second element is visible, I want the second one to be fixed at the top of the page
The first element can change its visibility using inline styles (display:none <-> display:block, even without reloading the website)
Javascript/Jquery solutions are fine
this could bo done adding a 'top' with the height of the first nav to the second, like i did here.
Note: This is not the complete solution: If you want to show the second nav only you could do this using js by setting the 'top' back to 0.
nav,
.secondmenu {
position: fixed;
height: 120px;
opacity: 1;
top: 0;
width: 100%;
background: lightgrey;
}
.secondmenu {
height: 50px;
background: grey;
opacity: 1;
z-index: 2;
top: 120px;
}
body {
height: 1000px;
}
<div class="secondmenu">Might be there or not and overlays the other navigation</div>
<div>Some other stuff separating the two from each other with relative position</div>
<nav></nav>
Creating a holder for both of them is the proper approach.
But in your case you can position both of them fixed.
and when the other one is hidden or shown you can handled both elements style(i.e. top and left properties) via Javascript
Try like below
Have you tried Sticky Kit? http://leafo.net/sticky-kit/
Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.
Im trying to get this scrolling effect i have seen on the website http://www.unheap.com , if you scroll to the bottom or to the right you'll notice that you can't scroll past whatsoever. Most website including this one allow you to scroll past slightly with a lot of resistance but I'm trying to replicate the example above where you can't scroll past at all. Anyone know of any plugins or methods on how to go about creating this effect?
The actual website itself is 100% the width and height of the page and any scrolling that occurs is accomplished via an absolutely positioned container with overflow: scroll.
EDIT
The actual overflow is set on the .grid element, which is inside the absolutely positioned .container element.
EDIT #2
The author is also using jScrollPane, but you can prevent the bouncing effect simply by making your body 100% width and height and absolutely positioning a container that has overflow set to scroll.
EDIT #3
See the attached code snippet - (you may have to copy and paste it into it's own HTML file because of the way SO displays snippets). There is no bouncing.
* { margin:0; padding:0; }
html,
body { width: 100%; height: 100%; overflow:hidden;}
body>div { height: 50vh; overflow: auto; padding: 10px; background: #000; position: absolute; width: 100px; top: 100px; left: 100px;}
body>div>div { height: 1000px; background: #0f0;}
<div>
<div>scrollable content</div>
</div>
My page starts (first thing after the <body> tag) with this:
<div id="wallpaper" style="width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1;">
<img src="images/black-matte-1650-Lit-Etched.jpg" style="width: 100%; height: 100%;" alt="">
</div>
This works fine on every browser except IE when it is in Compatibility View mode. Even most IE version display this correctly, but only if not in Compatibility View mode.
The content is supposed to "hover" over the background image so that as the page scrolls, the content scrolls, but the background remains stationary. Instead, the rest of the page's contents are pushed down to the bottom of the background image, and they render from there. So, my page appears to be nothing but it's background image, and you have to scroll down to see the page content below it.
Can anyone explain what is wrong, and how to fix this?
If you just want a fixed background image, I would not use a div. Try this instead...
CSS:
body{
background:url(images/black-matte-1650-Lit-Etched.jpg) top right no-repeat; background-attachment:fixed;
}
Then remove your wallpaper div and image from the HTML.
Edit: You could also apply that CSS to your div if that div needs a different background than the rest of the page:
div#wallpaper{
background:url(images/black-matte-1650-Lit-Etched.jpg) top right no-repeat; background-attachment:fixed;
}
When clicking on the thumbnail on the image on this site: http://www.grouprecipes.com/138587/banana-oatmeal-chocolate-chip-cookies.html, it expands and loads the original (full-size) version of the image.
I think they are using prototype or something similar. I've been looking around on here and have only mainly found examples that just increase the size of the original image and don't actually load another version of the image (like the linked example does).
Anyone care to help me figure out what techniques I should use for this? Combination of CSS3 and some .animate()?
Here is a simple example using CSS3, a bit of JavaScript.
Explanation:
Initially both the thumbnail and the enlarged version of the picture are placed on the same space using absolute positioning.
The enlarged version is not loaded until the thumbnail is clicked because the enlarged img tag doesn't have any src to begin with. It is assigned dynamically through the JS.
The image move to a different position is achieved using the translateX and translateY options which moves the absolutely positioned enlarged version of the image by the mentioned no. of pixels in both X and Y axes.
JavaScript is used to add a show class to the enlarged picture which triggers the transition effect and also set the src of the img tag to the newer/bigger image.
The enlarged version would return back to its original position when clicked anywhere on the enlarged image.
The JS code is written using class name instead of id just in case you need multiple such thumbnails on the same page. If that is the case, you may want to remove the [0], put it inside a for loop and replace the [0] with the counter variable. Also the enlarged image's source for each such thumbnail image can be maintained through a key-value pair mapping.
The z-index: -1 on the image originally (prior to adding .show through JS) is to make sure that it stays in the background and doesn't hinder the click on the thumbnail.
Points to note:
transform, translateX and translateY are all CSS3 properties/functions and hence have no support in IE8 and less. For older versions of Chrome, Firefox, Opera and Safari, browser prefixes like -webkit-, -moz would be required.
The classList.add and classList.remove functions are HTML5 standard and are not supported in IE9 but they equivalent IE9 code to add or remove class (like className += ..) can be easily done.
var images = {'img1': 'http://placehold.it/400/400'};
document.getElementsByClassName('thumbnail')[0].onclick = function(){
document.getElementById('enlarged').src = images[this.id];
document.getElementById('zoomed').classList.add('show');
}
document.getElementById('enlarged').onclick = function(event){
if(event.target != document.getElementsByClassName('thumbnail')[0])
document.getElementById('zoomed').classList.remove('show');
}
.container{
position: relative;
}
.thumbnail{
height: 200px;
width: 200px;
}
#zoomed .enlarged{
opacity: 0;
z-index: -1;
min-height: 200px;
min-width: 200px;
height: 200px;
width: 200px;
position: absolute;
transition: all 1s;
left: 0px; top: 0px;
}
#zoomed.show .enlarged{
opacity: 1;
z-index: 2;
height: auto;
width: auto;
min-height: 400px;
min-width: 400px;
transform: translateX(200px) translateY(200px);
}
<div class="container">
<img src="http://placehold.it/200/200" alt="" class="thumbnail" id='img1'/>
<div id='zoomed'>
<img src="" alt="" class="enlarged" id='enlarged'/>
</div>
</div>
Additional Resource:
Here is a good article on how to pre-load images (the enlarged versions if needed) using CSS + JS, only JS and AJAX.
I'm trying to achieve an effect similar to the one seen here on Dropbox's landing page. Notice that there's a link at the bottom of your browser viewport ('learn more'). This is always at the bottom of the page on first load. However, it's not fixed to the bottom of the window as you can scroll past it.
Any idea how to achieve this? A CSS or jquery solution is fine.
It's a link within a div which has the following CSS (the div's):
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
cursor: pointer;
The important parts there are position:absolute and bottom:50px