I'm trying to implement modal window on my page. Idea is to display a popup window with project screen shot and code sample. For now I've implemented popup window with screen shot. Seems to work fine except having 2 issues.
1) mask is not covering the entire window.
2) once popup window is closed, without refreshing if I click the screen shot again, mask is not displayed.
webpage
<div class="screenshot">
<div class="case">
<div class="thumb"> <a id="hooversMobile" href="#dialog" name="modal" title="Hoover's Mobile Site"><img src="images/proj_over_2.png" alt="Project thumbnail" style="top: 0px; "></a>
</div><!-- end thumb-->
</div><!-- end case-->
</div>
.js
The following DIV has position relative set. This means any position: absolute elements below it will be relative to its position.
<div class="project" id="mobile"></div>
This is what is causing the overlay to only extend from that position.
The second click problem is due to #mask being faded out but not running fadeIn again like you do on the content div.
Also, to get a better response you should pick out part of the code and copy into JSfiddle. Then you can ask very specific questions about the overlay positioning.
Related
I've made a modal, and I am hiding the scroll bar on the body so the user can only scroll the modal content.
Issue is that when I set overflow-y:hidden the body scrolls to top, but I want the page position to be preserved.
<body>
Long content
</body>
scrollY is at 1000
<body style="overflow-y:hidden">
Long content
</body>
scrollY goes to 0
I've toyed with the idea of storing the current scrollY position and scrolling back there once overflow-y is revoked. But its not the effect I desired.
Does anyone else have a better solution?
Assuming this is a true modal, and that you are preventing further actions to the main content until it is actioned (closed), why not add your content to a div and place a mask over the div, which would prevent interactions until it it closed. E.g.
<body>
<div class='content'>
Long content
</div>
<div class="modal-mask">
<div class="modal">Modal content</div>
</div>
</body>
Give the modal mask absolute positioning and covering the screen, then position your modal where appropriate.
First of all, thank you so much for checking my question.
I'm working on a web site and need to change images vertically in a selected div like a parallax effect. There are 3 images and need to change them.
There are 3 images in a div. Check the following screenshots.
This is the image 1. All these 3 images are half width of the screen.
And this is image 2.
Like this, there is another image 3. The yellow color content in the right side is not changing. Now i added just a simple scroll bar to scroll.
I need to add either parallax effect on these images to scroll vertically or quickly change images on mouse scroll.
Example for parallax effect I need to add : http://pixelcog.github.io/parallax.js/
Or I want to apply this effect : https://codepen.io/RenanB/pen/GZeBNg
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax">
<h2>Parallax Speed -1</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax">
<h2>Parallax Speed 1</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?gravity=center" data-speed="-0.25" class="img-parallax">
<h2>Parallax Speed -0.25</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1080" data-speed="0.25" class="img-parallax">
<h2>Parallax Speed 0.25</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?random" data-speed="-0.75" class="img-parallax">
<h2>Parallax Speed -0.75</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?blur" data-speed="0.75" class="img-parallax">
<h2>Parallax Speed 0.75</h2>
</div>
But only issue is, when I apply the same code to my images, this effect is activating to my full site.
Most importantly ,no matter from where user scrolling the page, I need to scroll to these 3 images, show all 3 and then scroll down to next section.
I added above parallax code, but it's applying to the whole site and not working.
What is the best way to apply above mentioned 2 methods to my web site ?
Well, as soon as you played with code, you need to see that those scripts and effects builded inside a wrapper, so the main thing in parallax effect is to have a nicely 100% width and height so you can see the delay and responsiveness in your website, what I can tell you do is the following :
Wrap your images inside a div with name like ( image_wrapper ).
Add a class for every image parent div like ( image_section ).
specify the 100% width and height for image_sections.
Add a height for the image_wrapper as this :
.image_wrapper{ height:calc( 100% * 4 ); }
100% for the full height, 4 for the number of images to have in parallax
I have a div, called "wrapper", with responsive height and overflow-y auto (so scroll enabled). Inside this div are lots of other divs, called "box". So, for example, if there are 3 divs inside the wrapper and I see them all fully, nothing should happen. But if any of this divs inside the wrapper are not fully visible (on page load and page resize), an other div (called "button") should fadeIn.
I just found this post, but it doesn´t solve my problem:
stackoverflow post
HTML:
<div class="wrapper">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<div class="button">
My Button
</div>
My fiddle:
HTML + CSS
How can I check, if all divs are fully visible inside an other div (on page load and page resize)?
#
UPDATE:
My problem is, that "viewport" doesnt work for me, because the script has also to check what happens outside the viewport (dynamically). The height of my divs is responsive and so not every time all of it is in the viewport ...
... but for me, I found an other solution. Now I check the height of my main div (my main content) and if this div is smaller than the "wrapper" div, I will fadeIn the "button" div.
You can try this my friend"
if ($(".wrapper div").css('visibility') === 'hidden') {
// ...
}
When hosting your HTML:
Right click on your wrapper and inspect element
Hover over the first div inside of the wrapper, and it should become highlighted
Check to see if that div is visible on the page
Continue the above steps for every div in your wrapper
This seems to solve a problem that's the same as, or very similar to, the problem you're describing:
zeusdeux/isInViewport
The "examples" folder includes various examples where DIVs react to whether or not they are contained within a defined viewport div.
EDIT: After reading comments on the question, this seems to be the best resource for reading up on the general problem and solutions (even though isInViewport looks very useful as well):
How to tell if a DOM element is visible in the current viewport?
I'm having a hard time figuring this out.
Trying to implement a Sidebar from Semantic UI http://semantic-ui.com/modules/sidebar.html#/definition, that comes from the bottom, but it doesn't fully hides, leaving a "strip" button that allows you to reopen it.
This is the best as I got : https://jsfiddle.net/wcec9gc6/1/
html :
<div class="ui bottom sidebar">Sidebar Content</div>
<div class="pusher">Page content</div>
<div class="ui bottom fixed menu button">
Click to open sidebar</div>
But as you can see it does not pushes the fixed button up, but I also don't want it to push the rest of the page, only the button
I'm using the jQuery Cycle plugin to cycle through some images on a webpage.
Each image also has various meta-data (title, description) that is also displayed on the page. Whenever the image changes, the title and description text also change to the title and desc for that image.
<div id='slides'>
<a href="http://whatever.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide1.jpg"/>
</a>
<a href="http://somewhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide2.jpg"/>
</a>
<a href="http://nowhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide3.jpg"/>
</a>
</div>
<div id='slideshow_text'>
<div id='ss_title'>The title goes here</div>
<div id='ss_desc'>The description goes here</div>
</div>
The javascript is pretty simple:
jQuery(document).ready(function(){
jQuery('#slides').cycle({
fx: 'fade',
speed: 1000,
timeout: 10000,
after: alterSlideText,
});
});
The alterSlideText javascript function is very simple. Basically its just running this:
jQuery('div#ss_title').html(slides_array[slideNum]['title']);
jQuery('div#ss_desc').html(slides_array[slideNum]['desc']);
The slides_array is simply an array of the title and description for each slide. So depending on what slide is currently being shown, it picks the appropriate title and description to put in the divs.
So overall the setup is very simple and straightforward. Image changes. Then the text changes.
Now the problem - This all works perfectly in Moz and Webkit. But in IE, the text div's will not change UNTIL I move my mouse over the slides div or slideshow_text div. The text will just not change at all if I just let it sit there. Once I move my mouse into that div, boom it changes to the appropriate text.
One maybe important note, the slideshow_text div has a very high z-index value (1000) and it actually floating over part of the image. I have just confirmed that text in other div's with normal z-index values changes just fine. It's only these divs with the high z-index value that aren't changing until I mouse over it.
Does anyone have any clue as to why this is and how to fix it?
I fixed this by adding the following to the end of the alterSlideText function:
// Force IE to refresh itself
jQuery('div#slides').blur();
jQuery('div#slides').focus();
Great job IE developers. Go find a different job.