I'm trying to implement a div slider into a standard iScroll HTML page, please see the below links:
With iScroll (slide not working properly):
http://utvecklingspunkten.se/iscroll.html
Without iScroll (slide working):
http://utvecklingspunkten.se/iscroll2.html
For some reason, iScroll hides the content (not the div containing it!) in the second div slide. The div containing the content is there allright and it's corretly possitioned (have a look in the console), but the content is simply hidden by iScroll. When removing all references to iScroll, as in iscroll2.html, everything works as it should.
Wrapper containing both slides:
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:2px; left:0;
background:#aaa;
-webkit-transition-property: left;
-webkit-transition-duration: 400ms;
display:block !important;
}
Each sliding element:
.additional-block {
position: absolute;
display:block !important;
}
Does anyone know how I can make iScroll and the slider to work together, and not interfere? Hopefully, there's only a line of code or two in iscroll.js that need to be changed. Likewise, an iScroll div (like the artificial scrollbar) overlaping my second slide div is another possible reason. Pointing this out for me would be greatly appreciated. Thanks!
Try using jQuery Slider, you can style it inside out. Plus you have there already mouse dragging and scrolling ( which actually works ).
Related
There are so many questions about Chrome and css transitions that I'm not sure if this has been asked before.
My situation is this: I have a layout that is basically a left and right split page. A box of content from the right side needs to be displayed over the content on the left side (I have no say in this, the design between desktop and mobile makes this necessary). The issue comes when transitioning images that are in the left side. The images are 0 opacity by default and displayed by applying an .active class to the appropriate image that sets its opacity to 1. I'm using css transition to animate it.
When the animation takes place, the box from the right side disappears until the transition is finished. The images in the left side do not layer over the top of it, it's not a background issue, and no matter what I set the z-index of the left and right side the right side box positioned over the left content disappears until the transition is finished.
Code example
<div>blah</div>
<div>another div</div>
<p>meh</p>
Here's a plunker to illustrate the issue (only occurs in Chrome): http://plnkr.co/edit/G2Ohg01PodUKN1xi2izq?p=preview
(seriously, you have to include code to link to plunker, what's the point of plunker then?)
None of the other issues I've seen have addressed this situation. Everything else I've seen has been about issues with the transitioning elements themselves and not elements in completely different code blocks positioned over those transitioning elements.
Any ideas on how this can be overcome or should I just tell the designers "deal with it"?
I'm just gonna take a stab in the dark and assume it's the white text. It's the only thing that's disappearing on the page when the transition is enacted.
your rule for .rightside .right-content has some CSS that's causing this behavior. Remove it and you should be good to go.
Your code:
.rightside .right-content {
position: relative;
z-index: 1;
padding: 1em 1em 3em;
/* overflow:hidden; ------------- Commented this.*/
float: left;
box-sizing: border-box;
width: 100%;
}
The .rightside container isn't allowing its overflow to be displayed, and the transitions are failing to animate this.
Your demonstration returned:
http://plnkr.co/edit/5C2cCZqnB4x7MTdeCGAn?p=preview
Codepen Alternative:
http://codepen.io/anon/pen/BzEkEP
I stumbled over a strange behaviour that occurs in Chrome and Firefox when you have got an element with "position:relative;" and "overflow:hidden;" and an anchor in it with "position:absolute;".
Whenever the anchor gets focus the element above it magically jumps to the top, even though its styles and markup tell a different story.
Example: http://codepen.io/mediadivisiongmbh/pen/pJWmxp
All you need is a setup similar to this:
HTML
<div class="container">
<h1>I can fly</h1>
<a class="focus-me" href="#">Evil Link</a>
</div>
CSS
.container {
position:relative;
overflow:hidden;
/* Optional */
border:1px solid gray;
}
.focus-me {
position:absolute;
}
Thanks for your answers so far. In order to clarify the issue please take a look at this example:
http://codepen.io/mediadivisiongmbh/pen/bdRjKy
When you hover over the container, the absolute positioned element containing the anchor will transition in view. When you click on it a lightbox (in this case Magnific Popup) is opened. After you close this lightbox the anchor gets focus again and jumps into view, which looks pretty odd.
Setting the anchor to display:none by default and display:block when hovering over the container worked for solving this issue.
After more research I figured out that the problem is caused by an accessibility feature in chrome.
In my case I just needed to make sure the anchor tag is only accessible while hovering over the container element.
Therefore the solution was altering the CSS like this:
.container {
position:relative;
overflow:hidden;
/* Optional */
border:1px solid gray;
}
.focus-me {
position:absolute;
display:none;
}
.container:hover .focus-me {
display:inline-block;
}
I'm not pretty clear about what you're looking for since you have different story. But if you mean you want to prevent jump because of focus on your link, you can use tabindex="-1" on your link to makes it not accepting tab stop. Check the Updated Pen
EDIT
Well when seeing your pen, I think you need to set display: none to your evil link and set it to display: inline-block when hovering to your container. Check Updated Pen.
I am currently using a theme for wordpress called velocity. I am working internally so my website is not online right now. But you can see the live preview of the theme here.
The problem is that my dropdown menuhided behind this DIV that was automatically created by the theme. I've tried using z-index on both elements, but it did not work.
I didn't change the code of the menu, so right now it must be similar to the live preview on the theme.
The code I assined my DIV (image) was this one:
.title {
background-color:#291d1d;
width:100%;
margin-left:auto;
margin-right:auto;
background-color:#120404;
opacity:0.7;
padding:20px;
border-radius:5px;
opacity:0.7;
padding-top:40px !important;}
Here is a screenshot:
http://i.stack.imgur.com/Gb4We.png
Any ideas on solving this?
you can try this :
position:absolute;
z-index:9999999;
Apply this in your drop down UL class
Thanx
Set z-index to a higher value for your menu.
ex: z-index:999;
The zindex you provided was not big enough probably you need to check what the z-index of the div is then increment the one from menu if not sure which zindex the image div has
use like a really big number like
z-index: 9999999999;
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
alite so i used a tutorial from this site: http://www.webreference.com/programming/css_gallery/index.html
the problem is, when i added more images, the gallery on the right fell out of the div margins. to fix this i used overflow:auto. now when there are a lot more images, i am allowed to scroll down my div. problem is the image shown when i hover is positioned at the top part of the div. so when i scroll down too much, the image either gets cut out from the top or doesnt appear at all. so its kinda like on this page right here. if you scroll down this page far enough you wont see this post any more unless you scroll back up. is there a css code that i can use to fix this. basically what i want it a position:fixed effect in the div box with the hover thing. so how do i edit the tutorial code to do that?
The issue is with step 9 in the tutorial
#container li {
float:left;
}
An important concept to know with floats is the clear property. Because the space of the images exceed that of the containing div, the images effectively fall out of the div. There are several ways to resolve this issue. Read here for more http://css-tricks.com/all-about-floats/
1.overflow: auto; like you have already implemented
2.define a class
.clear {
clear:both;
}
and put <div class="clear"> right before the closing tag of the container
3.Use pseudo selector :after
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
change <div id="container"> ... to <div id="container" class="clearfix">
Personally, I prefer method 3, because it makes markup cleaner. Just be aware of browser compatibility for method 3.