I have made a simple image slideshow with text underneath that changes with the relevant image. This seems to work fine on all browsers except IE8, the text seems to get a strange gray background color applied to the text, though it has no background color or any background image applied to it.
The html and css are as below:
HTML:
<div id="slideshowContainer">
<div class="slideshow">
<img src="images/01.png" width="800" height="560" />
<img src="images/02.png" width="800" height="560" />
</div>
<div class="info">
<h5> This is text 1 </h5>
<h5> This is text 2 </h5>
</div>
<ul id="nav">
<li id="prev">Previous</li>
<li id="next">Next</li>
</ul>
</div>
CSS:
.info {
list-style-type:none; z-index:150; top:100px; left:40px; width:300px; height:200px; }
SCRIPT:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({fx: 'fade', pause: 1, prev: '#prev', next: '#next'});
$('.info').cycle({fx:'fade', speed: 10 , prev: '#prev', next: '#next'});
$('.info').cycle({cleartypeNoBg: true});
});
</script>
I think the issue may be cleartype.
See how jCycle fixed it here.
Related
The image on the top is what i am trying to match. The image on the bottom is my own. I am having trouble making this responsive. The svg image goes out of the container which allows horizontal scrolling. It is supposed to be "cut in half". There should be no horizontal scroll and there should be no white space on the white side. The part of the image should be hidden. Anyone have any ideas?
import React from "react";
import illustrationWorking from "../images/illustration-working.svg"
const Hero = () => {
return (
<section className={'hero'}>
<div className={'container'}>
<h1>More than just shorter links</h1>
<div className="row">
<div className="col">
<p>Build your brand’s recognition and get detailed insights on how your links are performing.</p>
<button variant="info">Get Started</button>{' '}
</div>
<div className="col">
<img
className="illustration"
loading={'lazy'}
src={illustrationWorking}
alt={'Illustration Working'}
/>
</div>
</div>
</div>
</section>
)
}
export default Hero;
Use clip:
<style>
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
img:hover{
clip:rect(0px,100px,200px,0px);
}
</style>
<img src="http://www.w3schools.com/cssref/w3css.gif" width="100" height="140" />
I have a problem with changing images by hover effect. Actually I can change image if the images are one on the top of the other but I need something different.
I need to change the images when I mouse over another image. Like;
<div id="gallery">
<div>
<img src="images/team-large.jpg" alt="Img">
</div>
<ul>
<li>
<img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler">
</li>
<li>
<img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler">
</li>
<li>
<img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon">
</li>
</ul>
</div>
This is my HTML Code and I need to change
<img src="images/team-large.jpg" alt="Img">
this image when I mouse over the other sub images but I'm stuck.
Addition;
How can I change other images by onmouseover and onmouseout commands??
<div id="gallery">
<div>
<img src="images/team-large.jpg" id="Img1" name="Img1" class="Img1" alt="Img1" />
</div>
<ul>
<li>
<img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler"
onmouseover="'#Img1'.src='images/elek3.jpg'" onmouseout="'#Img1'.src='images/team-large.jpg'">
</li>
<li>
<img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler" class="thumbnail">
</li>
<li>
<img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon" class="thumbnail">
</li>
</ul>
</div>
I added the ID name to Img1 and tried to change the image when I mouse over 'images/elek2.jpg' but it doesn't work.
Thanks for help.
You could alter the background image using css's :hover instead. Something like:
div{
height:200px;
width:200px;
background:url("http://placekitten.com/g/200/200");
}
div:hover{
background:url("http://placekitten.com/g/200/400");
}
<div></div>
For what you're looking for, you might need the child or sibling selector:
.parent{
height:300px;
width:300px;
background: url("http://placekitten.com/g/300/300");
}
.child{
height:200px;
width:200px;
background: url("http://placekitten.com/g/200/200");
}
.parent:hover .child{
background: url("http://placekitten.com/g/200/300");
}
<div class="parent">
<div class="child"></div>
You may try this jQuery code to change source of main image
var original = $('#main').attr('src');
$('.thumbnail').mouseover(function()
{
var source = $(this).attr('src'); // retrieve image source of hovered image
$('#main').attr('src', source); // update main image source
})
.mouseout(function() {
$('#main').attr('src', original); // restore original image source
});
jsFiddle code (UPDATED)
In the linked snippet, I've assigned a main id to main image and a thumbnail class to other images. This allows to access them runtime via jQuery.
Here i am trying to open and get the contents of one div to target div on-click on a href.
Here i have table where i have hrefs which has the link to div ids, and i have an target div which is empty.
when i click the href links, the linked div contents should open in the target div.
for ex:
for link fea1 i have linked id #m1, when i click the fea1, the #m1 contents should appear in target div.
How can i do this???
here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<table border="0">
<tr>
<td>
<hr>
<a href="#m1">
fea1
</a>
<br>
<hr>
<a href="#m2">
fea2
</a>
<br>
<hr>
<a href="#m3">
fea3
</a>
<br>
<hr>
<a href="#m4">
fea4
</a>
<br>
<hr>
<a href="#m5">
fea5
</a>
<br>
<hr>
<a href="#m6">
fea6
</a>
<br>
<hr>
<a href="#m7">
fea7
</a>
<br>
<hr>
<a href="#m8">
fea8
</a>
<br>
<hr>
<a href="#m9">
fea9
</a>
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">
dasdasdasd
</div>
<div id="m2">
dadasdasdasd
</div>
<div id="m3">
sdasdasds
</div>
<div id="m4">
dasdasdsad
</div>
<div id="m5">
dasdasd
</div>
<div id="m6">
asdasdad
</div>
<div id="m7">
asdasda
</div>
<div id="m8">
dasdasd
</div>
<div id="m9">
dasdasdsgaswa
</div>
</body>
</html>
css:
a{
text-decoration:none;
color:black;
}
.target{
width:50%;
height:200px;
border:solid black 1px;
}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
display:none;
}
You can put all your #m1...#m9 divs into .target and display them based on fragment identifier (hash) using :target pseudo-class. It doesn't move the contents between divs, but I think the effect is close to what you wanted to achieve.
Fiddle
HTML
<div class="target">
<div id="m1">
dasdasdasd m1
</div>
<!-- etc... -->
<div id="m9">
dasdasdsgaswa m9
</div>
</div>
CSS
.target {
width:50%;
height:200px;
border:solid black 1px;
}
.target > div {
display:none;
}
.target > div:target{
display:block;
}
From what I know this will not be possible only with css. Heres a solution how you could make it work with jQuery which is a javascript Library. More about jquery here: http://jquery.com/
Here is a working example : http://jsfiddle.net/uyDbL/
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
});
});
Update 2018 (as this still gets upvoted) here is a plain javascript solution without jQuery
var target = document.querySelector('.target');
[...document.querySelectorAll('table a')].forEach(function(element){
element.addEventListener('click', function(){
target.innerHTML = document.querySelector(element.getAttribute('href')).innerHTML;
});
});
a{
text-decoration:none;
color:black;
}
.target{
width:50%;
height:200px;
border:solid black 1px;
}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
display:none;
}
<table border="0">
<tr>
<td>
<hr>
fea1<br><hr>
fea2<br><hr>
fea3<br><hr>
fea4<br><hr>
fea5<br><hr>
fea6<br><hr>
fea7<br><hr>
fea8<br><hr>
fea9
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>
Put for div same name as in href target.
ex: <div name="link"> and <a href="#link">
easy way to do that is like
Demo
havent tried but this might help
$(document).ready(function(){
r=0;s=-1;
$(a).click(function(){
v=$(this).html();
$(a).each(function(){
if($(this).html()==v)
return;
else ++r;
$(div).each(function(){
if(s==r)
$(div).appendTo($(".target"));
++S;
});
});
});
});
Try this code in jquery
$(document).ready(function(){
$("a").click(function(){
var id=$(this).attr('href');
var value=$(id).text();
$(".target").text(value);
});
});
if you use
angularjs
you have just to write the right css in order to frame you div
html code
<div
style="height:51px;width:111px;margin-left:203px;"
ng-click="nextDetail()">
</div>
JS Code(in your controller):
$scope.nextDetail = function()
{
....
}
the chrome dev tools now support to show paint rectangles,it really helps.but i found some strange thing that sometimes the repaint area is too large to understand.
this is my code
<style type="text/css">
div { width:500px; height:30px; border:1px solid red; margin:20px;}
div.inner { width:400px; height:20px; border:1px solid green; margin:5px;}
</style>
<div id="txt"></div>
<div></div>
<div>
<div class="inner">
<script> document.write(111);</script>
</div>
</div>
<script src="http://chillrain.com/api/sleep.php?time=9"></script>
<div>
<div class="inner">
<script> document.write(222);</script>
</div>
</div>
<script src="http://chillrain.com/api/sleep.php?time=10"></script>
<div>
<div class="inner">
<script> document.write(333);</script>
</div>
</div>
<script src="http://chillrain.com/api/sleep.php?time=11"></script>
<div></div>
<div></div>
<script> setTimeout( function(){
document.getElementById('txt').innerHTML = "Hello World!"
} ,1000);
</script>
notice:sleep.php will sleep seconds and then return nothing, using it to block the page's rendering.
the first step,seems ok,it paints the whole page
the second step,donot u think the repaint area is too large?
the third step,too large ...
the fourth step, seems okay , it repaint the whole page again.
the fifth step,seems okay, it only repaint the 'txt' div
why the second and the third steps repaint so large area?
I have no margins applied to this particular div, no floats and more annoyingly it works on a different page. Below is the code for the css rule:
#prizedraw-fliemore{
position: relative;
top: 164px;
left: -720px;
z-index: 3000;
}
The div shows up when i use position:absolute but that is useless to me. I have tried display, visibility and nothing i try works. Can someone help me out please? Thanks
The page code is:
<div id="column-left-content">
<p class="height"><strong>Learn more about CAREFREE® pantyliners and discover how they can help you feeling clean, fresh and protected all day long.</strong></p>
</div>
<div id="column-right-content">
<p><strong>Free to be me</strong> has been put together for you by the thoughtful makers of CAREFREE®, who design feminine hygiene products to give you all the protection you need.<br /><br />
Now that you've reached puberty, there are things you need to know that you might not know already. CAREFREE® has the answers to some of the questions you might just be asking...
</p>
</div>
<div id="car-boxes">
<div class="car-nav">
<div class="container">
<a class='example5' href="lb/why.html" style="border:none;" rel="group"><img src="images/carefree/pantyliners.png" class="bw" style="border:none;" /></a>
<img src="images/carefree/pantyliners-y.png" class="colour" alt="" />
</div>
</div>
<div class="car-nav">
<div class="container">
<a class='example5' href="lb/discharge.html" style="border:none;" rel="group"><img src="images/carefree/discharge.png" class="bw" style="border:none;" /></a>
<img src="images/carefree/discharge-y.png" class="colour" alt="" />
</div>
</div>
<br />
<div class="car-nav">
<div class="container">
<a class='example5' href="lb/difference.html" style="border:none;" rel="group"><img src="images/carefree/difference.png" class="bw" style="border:none;" /></a>
<img src="images/carefree/difference-y.png" class="colour" alt="" />
</div>
</div>
<div class="car-nav">
<div class="container">
<a class='example1' href="lb/right.html" style="border:none;" rel="group"><img src="images/carefree/right.png" class="bw" style="border:none;" /></a>
<img src="images/carefree/right-y.png" class="colour" alt="" />
</div>
</div>
</div>
<div id="prizedraw-car">
<img src="images/prizedraw.png" alt="Read More" />
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-2268991-20");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
My guess is that IE6 is positioning it off the screen, in other words the point you think you are relative to is not the point IE6 is using.
Are you able to make it appear by temporarily setting top/left to 0px and seeing where it shows up?
EDIT - Just looked up some code on one of my sites that does something similar.
I think you need to set position:relative on the parent div then use position:absolute and top/left on the child div.
Try to set position: relative on the parent div of the element you want to position.
It sounds wierd, because usually an absolute element needs a relative parent.
But I found that for older versions of IE, if you have a 'disappearing relative div', then making its' parent relative as well might solve you some problems.
try removing the {left: -720px;} and use a conditional stylesheet for IE. also try giving position relative to the parent of #prizedraw-fliemore