Im creating a mobile version for my website, and I'm currently busy with a 'image scroll' by swiping. I found a code on the internet I'm using, but it doesn't work with the menu i've created.
The menu that pops up, stays below the image scroller..
How do I get it to get below the opened menu?
Thanks for the help!
Regarding this page: http://m.tf2-29.com/TF_Members.asp
Try to set z-index of popmenu
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
.bbstable
{
BACKGROUND: #1e201c;
margin: 0px;
padding: 0px;
z-index: 2; /* set z-index higher than image scroller */
}
or remove z-index: 1 in .swiper-container
Related
I have the script from previous stack overflow question on how to pick an image from an array at random.
Script to display an image selected at random from an array on page load
I want to take his idea a bit further, and display this image fullscreen on page load. I am working on a website, and had the idea to use an image as a greeting page. Where, when the page loads, you are greeted with a fullscreen HD image. When clicked, this image would disappear and show the full site. I wasn't exactly sure how to accomplish this though. Any ideas?
Edit: I'm not looking for direct implementation. Just general thoughts or jsFiddles on how to accomplish this task.
For showing the image on the page load you can use $( document ).ready() function. on click() of the image you could show the website.
Try using CSS like,
First option,
img {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
Second option,
img {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
To understand the above options read Perfect Full Page Background Image
I recommend you to use a complete full page background image slider for your problem. If it is available then use it without wasting your time.
I found a full page slider on http://www.freshdesignweb.com/fullscreen-jquery-slider.html in which the first one background slider is best suitable to you.
Also you can go to https://www.google.co.in/?q=full+background+image+slider to get more image sliders
I implemented the fancy box as usual:
<img src="img/fotos/architektur/thumbs/1.jpg">
<img src="img/fotos/architektur/thumbs/2.jpg">
It works totally cool on Desktops but on my iPad it only works with the left control. A move forward to the next image (right arrow) doesn't work... Why?
if "cyclic" is set to true, maybe there's an overlay issue
did you try to display the page in a desktop window resized to ipad resolution? maybe with "Pesticide" activated ? (it's extension for chrome, will make outlines on all elements)
.fancybox-overlay {
position: relative;
top: 0;
left: 0;
overflow: hidden;
display: none;
/* z-index: 9999;*/
background: url('fancybox_overlay.png');
}
I'm having an issue with an Orbit slideshow, part of ZURB's Foundation.
http://visiondemo.com.au/tmp/
If you click on the header logo or land on the homepage by clicking a link, the slideshow loads perfectly. No issues. However, if you hit refresh, it's missing.
Also, when the page is refreshed and the slideshow is missing, resizing the window makes it magically appear.
Any ideas how I can get it loading at all times?
Cheers.
Hmm this answer will be quite a hacky way of doing things but I think it'll work for you in a way or another..
Firstly to fix the height: 0px problem in the data-orbit.
Since you have chosen the content of your orbit to be an actual caption as well then, try to add this in a <style> tag or in your style.css. (#note this is only for the medium-up block only, supply your height for the small block).
.slideshow.show-for-medium-up > li {
height: 421px !important;
}
now thats already good and working, you'll see your orbit now.. apparently another problem would appear. It would display the orbit before the content's .orbit-caption finishes styling the list. So append this small fix to your style.css
/* Orbit Fix */
ul[data-orbit] {
margin: 0;
padding-left: 0;
list-style-type: none;
}
/* initially, hide all slides... */
ul[data-orbit] li,
ul[data-orbit] .orbit-caption {
display: none;
}
/* ...except for the first one */
ul[data-orbit] li:first-child { display: block; }
/* show slides once .orbit-container is loaded */
.orbit-container ul[data-orbit] li,
.orbit-container ul[data-orbit] .orbit-caption {
display: block;
}
UPDATE:
I think thats because you show the image only when the screen is small, I recommend adding this,
.slideshow.show-for-small-only img {
/* change the img height here */
height: 200px; /* Change this as you see fit */
}
I found this great plugin called onepage-scroll, which meets my needs, except for one thing. Some of my pages (<section> tags) can be larger than one screen. How can I customize it so that it only scrolls when it finished the "regular" scrolling, inside the section ?
I tried to change the css rule :
.onepage-wrapper {
width: 100%;
/*height: 100%;*/
height:200%;
display: block;
position: relative;
padding: 0;
-webkit-transform-style: preserve-3d;
}
but it still scrolls to the next page, with one scroll movement.
I'm trying to make it scroll to the bottom of the section (height > 100%), then scroll to the next page.
Any help will be appreciated. Thanks !
You may want to use fullPage.js instead. There's an option called scrollOverflow which allow you to have scrolling inside section as you can see in this example
While it's a less ideal solution, we ran into the same issue and found that using an iframe works with jquery onepage scroller as a solution for providing this.
I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.