This is a bit strange question but I am trying to use the cycle plugin to display only one image. That is just to use the various effects the plugin is providing. I have a row of images with certain text and each image/text will be hosted inside a div tag which will be enclosed by the cycle plugin. At certain times, different div tag will have some animation effect using the plugin's cycle function. I think I can add the same div tag to work around this but I am wondering if anyone knows how to do what I want to do.
If you're trying to cycle between DIVs that have the same image but different text then, yes, you can do that. Here's a basic example.
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
<style type="text/css">
.slideshow { position: relative }
.slideshow div { position: relative; }
.slideshow div span { position: absolute; top: 5px; left: 5px; }
</style>
<div class="slideshow">
<div>
<span>Here's some text!</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
<div>
<span>Some more different text.</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
<div>
<span>Even more different text.</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
</div>
Related
current situation
I have a fabric canvas placed inside a parent div. how can i stretch the canvas to the full width and height of its parent
Here is what my code look likes:
<div class="design_editor_div">
<canvas id="c" width="500" height="500" style="border-style:dashed;border-color:#a1a1a1;text-
align:center;border-width:initial;"></canvas>
<img src="{{ '2.png' | asset_url }}" title="" alt="" style="display: none" id="img">
</div>
You can use css and select the child element of the div as such:
canvas > div {
display: block;
width: 100%;
height: 100%;
}
For sure, use a seperate stylesheet and include a <link>path-to-stylesheet</link> in the head or <style> css... </style> tags in the head of your html document. Inline CSS styles should be reserved for elements that you need to alter that are very unique, such as making part of a or <p> element <strong> or <u>. Including many <style> tags inline will impact the readability of the tag.
I inserted an image into a tag by giving it a class of .img-circle. Now the circle that it yielded is too small and I want to increase the radius.
I even tried giving the <img> tag an attribute of width="35px", but the image circle did not change.
Please, suggest CSS3 methods or with jQuery.
img-circle Bootstrap class only formats the border in such way that it takes the circle form:
.img-circle {
border-radius: 50%;
}
It does not affect the size of your image at all.
You only need to increase your image and this "circle" will increase with it.
Here is the example with three images of type img-circle with different sizes described by CSS classes or inline styling:
.big-image {
height: 100px;
width: 100px;
}
.small-image {
height: 64px;
width: 64px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<!-- Original square image -->
<img class="big-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Big circle image with CSS class rule -->
<img class="img-circle big-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Small circle image with CSS class rule -->
<img class="img-circle small-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Circle image with inline style -->
<img class="img-circle" style="height: 16px; width: 16px;" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
Obviously I am a novice coder :( This seems like it should be easy, but I can't figure it out.
CSS
div {
display: none;
}
BODY
<div id="div" style="width:100%;height:1750px;z-index:1;">
<iframe src="mypage.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
</div>
<iframe src="http://www.website.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
jQuery
$('#hover').mouseenter(function() {
$('#div').show();
}).click(function(e) {
e.preventDefault();
$('#div').hide();
});
This webpage code displays the clickable image "30x1800clear.gif" at the top of the page that opens the "mypage.html" iframe content on hover and closes the ifame content on clicking the image. Which is exactly what I want it to do.
I want the image to stay fixed at the top of the page on scroll. If I try to use ANY styling at all, or surround the code in a DIV with any position styling the image disappears completely.
Can someone show me how to make the image stay fixed at the top of the browser window on scrolling the page?
add position is fixed to image tag. like this
<img src="30x1800clear.gif" width="100%" height="20px" border="0" alt="" style="position: fixed;">
There are several issues here:
You have a div with id div. This is very confusing, so lets change the id to mydiv. In your css, you apply your display:none to div, so to all divs. I guess you want to apply it only to the div in question, so yo should change it to:
#mydiv {
display: none;
}
You're mixing inline style and separate file for the same element, so let's combine everything into the css file:
#mydiv {
width:100%;
height:1750px;
z-index:1;
}
And the first line of your html becomes:
<div id="mydiv">
Now, for the real question: You want to fix the position of the image to the top. Let's add this lines to the #mydiv css block:
position: fixed;
top: 4px; /* You can change this to any number of pixels you want, including 0 */
left: 4px; /* Same thing */
Usually i'm here for help with a JavaScript class that I just started, but this on is for a personal project that I'm working on. I have code (see below) that will increase the size of a photo on mouse-over, and it works fine.
Problem is, I want to not only display a larger image but for one of these I'd like to also display a different image completely on mouse-over (and yes, still at a larger size too!).
This is what I've been working with but can't seem to get it to work correctly (the first image is a "before", and the second is an after Photoshop enhancement with both before/after side by side). Any help is greatly appreciated. Thanks...
<p><img class="displayed" src="Images/sheriffcarB4.jpg" width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src=Images/sheriffcarcompare.jpg" "this.width=1100;this.height=350;"onmouseout="this.width=250;this.height=150"/></p></div>
Maybe something like this?
<div>
<p><a href="" target="blank"><img class="displayed" src="Images/sheriffcarB4.jpg"
width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src='Images/sheriffcarcompare.jpg';this.width=1100;this.height=350;" onmouseout="this.width=250;this.height=150"/></a>
</p>
</div>
WORKING DEMO
In the Demo wait for a secong over you hover over the image for the image src to change. This happens only because the src is a 3rd party website. It will work perfectly in your case
You can do this without using javascript at all... The :hover CSS selector is similar to the onmouseover javascript event.
<style>
a img.Large { display: none; }
a:hover img.Small { display: none }
a:hover img.Large { display: block; }
</style>
<a href="your link">
<img class="Small" src="Images/sheriffcarB4.jpg"
width="250" height="150"
alt="Photoshop Enhancement" />
<img class="Large" src="Images/sheriffcarcompare.jpg"
width="1100" height="350"
alt="Photoshop Enhancement" />
</a>
See this Fiddle
Html
<a href="#">
<img class="actul" src="http://t2.gstatic.com/images?q=tbn:ANd9GcTjlz0eYHrzmEgWQ-xCtzyxIkA6YoZHpG0DnucD1syQXtTLyoZvuQ" width="400" height="300"
alt="picSmall" />
<img class="another" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT7cjWFiYeCohI7xgGzgW60EHd-kEJyG3eNEdJJhnhp7RFT6o6m" width="600" height="350"
alt="picLarge" />
</a>
Css
a img.another { display: none; }
a:hover img.actul { display: none }
a:hover img.another { display: block; }
I have an href image in this markup.
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="http://image.com/image.jpg" width="100" height="100">
</a>
</div>
When I hover over it, I want to show another image in the top right corner. Is this doable with css? or do I need javascript for that?
My CSS looks like this but it still doesn't work
a.imga:hover {
background-image: url('over.png');
background-position: top;
z-index:3;
}
**Here is the solution you can try**
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" width="100" height="100">
</a>
</div>
Use can do it with CSS, but insted of img tag use a DIV with a background image
<div id="image"></div>
CSS style
#image{
width: 100px; //Image height
height: 100px; //Image width
background: url('') 0 0 no-repeat; //Give your image path here
}
#image:hover{
background: url('') 0 0 no-repeat;
}
Try CSS Sprites, check out this screen-cast from css-tricks.com on how to use them.
You can use :hover pseduo selector on the div with class imgdiv with background-position set appropriately to show on the top right corner. Off course, you should apply background-image to the div first.
Note that :hover does not work in IE6 for anything other than links. However, you can overcome this limitation by using javascript/jquery.