I have a content element which fades in if the user is above a certain area. The content element has a background image, which is in IE7/IE8 only a big black border instead of a gradient.
Animation code:
$(function(){
$('#TopPackets').mouseenter(function(){
jQuery('#TopPacketsContents').animate({
opacity: 1,
width: 'toggle'
}, 307, function() {
});
});
$('#TopPackets').mouseleave(function(){
jQuery('#TopPacketsContents').hide('slow');
});
});
Now the content element with the transparent background image:
<div id="TopPacketsContents" style="opacity: 1; display: none;">
<!-- content -->
</div>
CSS:
#TopPacketsContents {
background-image: url("../images/transparentBackground.png");
background-repeat: no-repeat;
height: 303px;
width: 411px;
}
I tried the high ratest answer of this thread, but I cannot set background: transparent because I have a background image!
I also tried to create a wrapper element like on this page.
HTML
<div id="TopPacketsContents">
<div class="BackgroundImageWrapper">
<!-- content -->
</div>
</div>
CSS
#TopPacketsContents {
height: 303px;
width: 411px;
}
.BackgroundImageWrapper {
background-image: url("../images/TopPacketsBackground.png");
background-repeat: no-repeat;
}
So what are my options? I could use a non transparent image only for IE7/IE8 with conditional comments (would look ugly). Should I use another animation? Should I use a hover effect instead of the animation (only for IE7/IE8)? Are there any other fixes out there?
See W3Schools on the opacity setting for CSS:
The CSS for this is: opacity=1.
IE8 and earlier: filter:alpha(opacity=100).
Seems I got this working. As I said I removed the opacity parameter:
<script type="text/javascript">
$(function(){
$('#TopPackets').mouseenter(function(){
jQuery('#TopPacketsContents').animate({
width: 'toggle'
}, 307, function() {
});
});
$('#TopPackets').mouseleave(function(){
jQuery('#TopPacketsContents').hide('slow');
});
});
</script>
New CSS with filter:
#TopPacketsContents {
width:411px;
height:303px;
background-image:url(../images/transparentBackground.png);
background-repeat: no-repeat;
/* IE hack */
background:none\9; /* Targets IE only */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/images/transparentBackground.png", sizingMethod="crop");
}
The following answer didn't work for me. I took my solution from this answer.
Related
There is a gap on the right side of my page probably 10px. I could fix it using oveflow-x:hidden for the html and body but if I do this, it disable the navbar effect
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 120) {
$("#mainNav").addClass("scrolling");
} else {
$("#mainNav").removeClass("scrolling");
}
});
</script>
That changes the navbar background-color when scroll down.
I tried width:100% as well, but it didn't work neither.
Could someone help me to eliminate the gap without affect this function?
Thank you
Got it. See http://jsfiddle.net/uffo6you/3/ The CSS specificity ranking of .scrolling wasn't strong enough to override #mainNav. Width and overflow shouldn't have any bearing on this at all. Pls confirm?
<style>
#mainNav{
height: 20vh;
width: 80%;
background-color: blue;
color: white;
position: fixed;
}
#mainContent{
height: 200vh;
padding-top: 20vh;
}
.scrolling{
background-color: red !important;
}
</style>
<div id="mainNav">Top Navbar</div>
<div id="mainContent">
Content goes here
</div>
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= 80) {
$("#mainNav").addClass("scrolling");
} else {
$("#mainNav").removeClass("scrolling");
}
});
</script>
I have a png with blue lines, a transparent background and nothing else. Is there a way in css to make the lines white?
CSS is used to modify the appearance of HTML. It cannot really affect an image directly. You could use two images of the same size, and use JavaScript to switch between them.
Here's one possible way to do this:
HTML
<body>
...
<div>
<image id="blue-img" class="currentFrame" src="/img/blue.png" />
<image id="white-img" class="hiddenFrame" src="/img/white.png" />
</div>
...
</body>
CSS
.currentFrame {
display: block;
}
.hiddenFrame {
display: none;
}
At this point, you could use the following JavaScript to hide one image and show the other. Because the images are the same size, and appear together in the HTML DOM, it will look like the images occupy the same space.
function changeFrame() {
removeClass("blue-img", "currentFrame");
addClass("blue-img, "hiddenFrame");
removeClass("white-img", "hiddenFrame");
addClass("white-img", "currentFrame");
}
// Add the given class to the DOM element with the given id
function addClass(id, class) {
...
}
// Remove the given class from the DOM element with the given id
function removeClass(id, class) {
...
}
The implementation of addClass and removeClass() functions are left as an exercise for the reader, but it can be much easier if you use jQuery or some other DOM API library.
You could also use the HTML5 <canvas> element, if you're not concerned about backwards compatibility, or if you need a transition animation. That would also involve some JavaScript coding.
You have at least 2 ways to achieve this effect
Option 1: Use the image as a mask
Here only the transparent part of the image is used, as a mask. If you apply it on a white element, the parts not masked will be white
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-color: white;
-webkit-mask-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
-webkit-mask-size: contain;
}
<div class="base">
<div class="test"></div>
</div>
Option 2: use a filter to change the color. For instance, use brightness(100)
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-size: contain;
-webkit-filter: brightness(100);
}
<div class="base">
<div class="test"></div>
</div>
However, both options have a limited support
Why don't you use the Canvas in HTML5 to create the image on user interface :-
it will give you more clarity as the images are created using px.
it will give you liberty to change in what every color, size you want as they are created using javascript .
The following element works fine in Chrome, but not in firefox.
What I'm expecting to see is my theme colours, which is defined in a separate place.
Now in firefox, the component itself renders, and it even creates the .swatch div, with the correct size of 40x40, as specified in the shadow dom styles. Unfortunately the background-color and border css rules are never applied.
The console output in firefox and chrome is exactly as I would expect, with the correct colours, which tells me that the values does exist, but for some reason the data is not bound to the template in firefox?
<polymer-element name="color-sample" attributes="color border">
<template>
<style>
.swatch {
width: 40px;
height: 40px;
margin-right: 0.5em;
background-color: {{ swatchColor }};
border: 1px solid {{ borderColor }};
}
</style>
<div id="sample" layout horizontal center>
<div class="swatch"></div>
<content></content>
</div>
</template>
<script>
Polymer({
color: "white",
border: "lightGrey",
ready: function() {
this.swatchColor = CoreStyle.g.theme[this.color];
this.borderColor = CoreStyle.g.theme[this.border];
console.log(this.swatchColor);
console.log(this.borderColor);
}
});
</script>
</polymer-element>
I should also point out that if I use inline styles directly on the .swatch div, then the binding seems to work fine, but I'm specifically looking for a solution to bind to the css directly to keep the html clean.
Seems I found the problem right after I posted.
Data binding isn't fully supported in <style> under the shadow dom.[1]
[1] https://github.com/Polymer/polymer/issues/456
After learning JS for about a month now and completing around 4 courses I am still unable to work out how to change an image when clicking a thumbnail! What I want to do is simple, I just want to change the Main Image when a thumbnail is clicked! In this example there are two thumbnail images in a div and a main image above them. I just want to change the main image when a thumbnail is clicked. I know this is DOM Manipulation and think it is: document.getElementById.....?
I have make a small page so that I can learn / try different things and and finally giving up and asking for help! The code is as follows:
#MainContainer {
position: relative;
margin:0px auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
#MainImage {
position: absolute;
top: 10px;
left: 50px;
width: 398px;
height: 265px;
background: url(MainImage01.jpg);
border: 1px solid black;
}
#TNBodyContainer {
position: absolute;
top: 290px;
left: 100px;
border: 1px solid black;
width: 268px;
height: 88px;
}
#TNOne {
position: relative;
width: 133px;
height: 88px;
background: url(SmallImage01.jpg);
}
#TNTwo {
position: relative;
left:135px;
width: 133px;
height: 88px;
background: url(SmallImage02.jpg);
}
<body>
<div id="MainContainer">
<div id="MainImage"></div>
<div id="TNBodyContainer">
<div id="TNOne">
<div id="TNTwo"></div>
</div>
</div>
Thank you very much for any help.
Margate
You need to add some scripting to change the image when either of the thumbnails are clicked. This function is called when the page is loaded. Change the image names to suit.
This should be placed in the section of the html page.
<script>
window.onload = function() {
var mainImg = document.getElementById('Main');
document.getElementById('TNOne').onclick = function() {
mainImg.src = 'main1.jpg';
//alert('one clicked');
};
document.getElementById('TNTwo').onclick = function() {
mainImg.src = 'main2.jpg';
//alert('two clicked');
};
};
</script>
The two thumbnail divs become <img> tags with the same IDs.
Similarly the main <img> is defined also (with id="Main"). Now the elements
are clickable.
<div id="MainContainer">
<div id="MainImage">
<img id="Main" src="MainImage01.jpg"</img>
</div>
<div id="TNBodyContainer">
<img id="TNOne" src="thumb1.jpg"></img>
<img id="TNTwo" src="thumb2.jpg"></img>
</div>
</div>
Finally CSS for the thumbnails, here float is used to keep the thumbnails in the same line within the TNBodyContainer div.
TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}
To change the image in the CSS background property, you need to use
document.getElementById("MainImage").style.background
The right way to go is to add event listeners:
document.getElementById("TNOne").addEventListener("click", function (event) {
setImage(event);
}, false);
document.getElementById("TNTwo").addEventListener("click", function (event) {
setImage(event);
}, false);
}
They both call the same function, but with event it is possible to see which one "clicked" with "event.target.id".
You can then decide what you want to do with for instance a switch statement. basically saying: if event.target.id == "TNOne".
You can see all this I made you a fiddle: http://jsfiddle.net/djwave28/32pQD/3/
There are some slight changes in your HTML and CSS too.
I am using the jQuery Cycle (full) Plugin on a page where I am using a container DIV (.content-left) with a width of 75% and a jQuery Cycle slideshow inside of that container. The images inside of that container should be adjusted automatically.
I use:
JS:
$('.slides').cycle({
fx: 'fade',
containerResize: 1 // default for jquery.cycle.all
});
HTML:
<div id="content">
<div class="content-left">
<div class="slides">
<img src="...">
<img src="...">
<!-- etc. -->
</div>
</div>
<div class="content-right">
some text
</div>
<div class="clear"></div>
</div>
CSS:
#content {
overflow:hidden;
}
#content .content-left {
width:75%;
float:left;
}
#content .content-left img { /* or: .slides img */
width:100% !important;
position:relative;
left:0px;
top:0px;
z-index:-2;
}
#content .content-right {
width:25%;
float:right;
}
On Page init my wrapping DIV's (.content-left) height and width get's adjusted just fine thanks to the containerResize function. However when I resize my browser window, the width and height of the slides stay the same, which is not what I wanted.
containerResize: 0 doesn't bring the desired effect either (it then ignores the height of the images and adjusts the height of the wrapper to the height of .content-right (and cuts off the image)).
When I am using only an image without loading Cycle at all everything works fine.
Any solutions for that?
Thanks!
Set in JS:
containerResize: 0,
slideResize: 0,
(really!) and then use the trick of transparent image in the container div. See here
for detail.
How about trying max-width: 100% !important; on the images, and remove the !important from the width: 100% !important, so that when cycle attempts to resize your slides back to the original width, your max-width definition will take precedence.
If you could provide a jsfiddle, that would also be of great help.