The background image in the shadow_div is not appearing as it is expected to be .
Although rest of the images are loading and appearing properly which are in mySlider div
but what about the background-image of the shadow_div?
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
});
</script>
<style type="text/css">
.mySlider
{
width:800px;
height:480px;
overflow:hidden;
margin:10px auto;
}
.shadow_div
{
background-image:url(Images\shadow.png);
background-repeat:no-repeat;
background-position:top;
width:510px;
height:296px;
margin:-90px auto;
}
</style>
</head>
<body>
<div id="my_image_slider" class="mySlider">
<img src="Images\audi.jpg" alt="" title="Audi India"/>
<img src="Images\bmw.jpg" alt="" title="BMW India" />
<img src="Images\aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img src="Images\bugatti.jpg" alt="" title="Buggatti APAC" />
<img src="Images\koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div><br />
<div class="shadow_div" ></div>
</body>
</html>
you are using Backslash \ symbol.
<img src="Images\audi.jpg" alt="" title="Audi India"/>
you should use Forward Slash / Symbol . also make sure image path is right.
<img src="Images/audi.jpg" alt="" title="Audi India"/>
Here you can see the image in class .shadow_div is appearing. See the DEMO.
Your image is not getting correct path: try this below, as you are using forward slash '\'
instead of backslash '/'
<img src="Images/audi.jpg" alt="" title="Audi India"/>
<img src="Image/bmw.jpg" alt="" title="BMW India" />
<img src="Image/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img src="Image/bugatti.jpg" alt="" title="Buggatti APAC" />
<img src="Image/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
Related
I've added all scripts and css, it is working when the html page alone runs, but not when the app runs. Nothing is showing in the console. I've tried adding css and js references in index page too.
What may be the problem?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.css'>
<div class="slider responsive">
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.js'></script>
<script src="js/slider.js"></script>
<script>
$(function () {
$('.slider').slick();
});
</script>
You mention its an angularjs App, but I dont see angularJS referenced in your HTML. If you want an angularJS version of slick carousel, please check this out:
http://devmark.github.io/angular-slick-carousel/#/
Let me know how it goes.
Note: This should have been a comment , but answering as I dont have enough points to comment.
I am using this css-only lightbox:
https://www.thecssninja.com/demo/futurebox/#close
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The CSS Ninja" />
<meta name="keywords" content="CSS, CSS3, CSS pseudo selectors, Futurebox" />
<meta name="description" content="Futurebox, lightbox without the javascript" />
<meta name="robots" content="all" />
<meta name="copyright" content="The CSS Ninja" />
<link rel="stylesheet" type="text/css" href="https://www.thecssninja.com/demo/futurebox/_styles.css" media="screen" />
<title>Futurebox, lightbox without the javascript | The CSS Ninja</title>
</head>
<body>
<div id="cssninja">
<p>Example from the [CSS] Ninja</p>
</div>
<ul>
<li><img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" /></li>
<li><img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" /></li>
<li><img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" /></li>
<li><img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" /></li>
<li><img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" /></li>
</ul>
<div class="overlay" id="futurebox_img1">
<img src="gr_cssninja_lrg.png" alt="The Css Ninja" width="469" height="500" />
</div>
<div class="overlay" id="futurebox_img2">
<img src="gr_cssninja_lrg2.png" alt="The Css Ninja" width="469" height="500" />
</div>
<div class="overlay" id="futurebox_img3">
<img src="gr_cssninja_lrg3.png" alt="The Css Ninja" width="469" height="500" />
</div>
<div class="overlay" id="futurebox_img4">
<img src="gr_cssninja_lrg4.png" alt="The Css Ninja" width="469" height="500" />
</div>
<div class="overlay" id="futurebox_img5">
<img src="gr_cssninja_lrg5.png" alt="The Css Ninja" width="469" height="500" />
</div>
<!-- Google analytics -->
<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">
var pageTracker = _gat._getTracker("UA-4638292-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>
My problem is, when I use this lightbox inside an iframe the lightbox is opening only in the middle of that iframe.
You can see what I mean here in jsfiddle:
https://jsfiddle.net/sqvz2ahp/
Is it possible that the lightbox is always in the center of the browser page, no matter if my code was implemented with an iframe?
The important thing is: I can only work with CSS not with javascript.
**I got text in a div after 10 the margin works with it but for some reason the padding does not work. So if someone could tell me what is wrong??? It is a html5 taskbar/10 images in a row which i comment out when needed. **
HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Waylon's Unturned</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../css/main.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHeader">
<img src="../img/logo.jpg">
<nav><ul>
<nav><ul>
<li>Home</li>
<li class="active">Donate</li>
<li>Forum</li>
<li>Contact</li>
</ul></nav>
</header>
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2>About donations</h2>
</header>
<content>
<p>Thank you for considering a donation, all of the donations will be used to improve the server, website and forum.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="BF766GY6YY8XN">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/nl_NL/i/scr/pixel.gif" width="0" height="0">
</form>
</content>
<h1><center><tt><b>Our Donation Goal :</b></tt></center></h1>
<p>We try to get 30 euro's each month to keep all of our servers, the website and the forums running.</p>
<div class="taskbardiv">
<img class="taskbar" src="../img/loadingbarblack.png" width="1" height="40">
<!--<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">
<img class="taskbar" src="../img/loadingbar.png" width="40" height="40">-->
<p class="taskbarp">0% Complete</p>
</div>
</article>
</div>
</body>
</html>
CSS3:
.taskbarp{
color: #82a213;
float: right;
font-size: 5;
padding-left: 20px;
margin: 10;
}
.taskbar{
border-radius: 5px;
}
.taskbardiv{
background: black;
border-radius: 10px;
padding-top: 6px;
}
I'll try to help, although I don't know if I really understand your question:
Always use measurements (like px, em or %) when working in CSS! Your font-size as well as your margin are missing them, so they will simply be ignored by the browser.
Both paddings work as expected but padding-left doesn't make much sense when you're floating the text to the right side of the container.
That's all I can see for now, hope that helps you.
How can I change this exact code to do the hovering effect on mouseover?
I tried following some of the other questions and answers, but I could not really follow them.
So the HTML is:
<img src="R3.jpg" width=700 height=300 />
<div>
<img src="SSX.jpg" height=100 width=120 />
<img src="MaxPayne3Cover.jpg" height=100 width=120 />
<img src="NC.jpg" height=100 width=120 />
</br>
</div>
Now what I want to do is change the big size image when the mouse hovers over the small images.
Try this it`s so easy and the shortest one, just change the Image's URL:
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</a>
Try the following code. It's working
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
I modified the code, like it will work with some delay in it.. But still, it is not animating..
function changeImage(img){
// document.getElementById('bigImage').src=img;
setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}
Or do like this:
<a href="SSX.html">
<img src="SSX.jpg"
onmouseover="this.src='SSX2.jpg';"
onmouseout="this.src='SSX.jpg';"
height=100
width=120 />
</a>
I think this is the easiest way.
No JavaScript needed if you are using this technique
<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>
the you will need css to control it
.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}
remember to give some class to div and mention it in your css name to avoid trouble :)
The easiest way for Roll Over image or Mouse Over image for web pages menus
<a href="#" onmouseover="document.myimage1.src='images/ipt_home2.png';"
onmouseout="document.myimage1.src='images/ipt_home1.png';">
<img src="images/ipt_home1.png" name="myimage1" />
</a>
<script type="text/javascript">
function changeImage(img){
img.src=URL_TO_NEW_IMAGE;
}
</script>
<a href="RR.html"><img id="bigImage"
onmouseover="changeImage(document.getElementById('bigImage'));"
src="R3.jpg"
width=700
height=300/></a>
<div>
<a href="SSX.html" ><img src="SSX.jpg" height=100 width=120/></a>
<img src="MaxPayne3Cover.jpg" height=100 width=120/>
<a href="NC.html" ><img src="NC.jpg" height=100 width=120/></a>
</br>
</div>
If you don't want to do Javascript you can use CSS and :hover selector to get the same effect.
Here's how:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Image hover example</title>
</head>
<body>
<div class="change_img"></div>
</body>
</html>
stylesheet.css
.change_img { background-image:url('img.png'); }/*Normal Image*/
.change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/
Just Use this:
Example:
<img src="http://nineplanets.org/planets.jpg"
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>
Works best with the Pictures being the same size.
Copy This
<img src="IMG-1"
onmouseover="this.src='IMG-2';"
onmouseout="this.src='IMG-1';">
</img>
Here is a simplified code sample:
.change_img {
background-image: url(image1.jpg);
}
.change_img:hover {
background-image: url(image2.jpg);
}
I have this:
<html>
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<style type='text/css'>
body {
background-color: #000;
}
</style>
</head>
<body>
<img src="1.jpg" height="100%" style="float: left;" />
<img src="2.jpg" height="100%" style="float: left;" />
<img src="3.jpg" height="100%" style="float: left;" />
<img src="4.jpg" height="100%" style="float: left;" />
</body>
</html>
This is big images. But my browser show me two images side by side and next in a new line.
I want to disply it all in one line. How to do it?
Stop floating the images and set white-space: nowrap on the body or some other wrapper element.
body {
white-space: nowrap;
}
and:
<body>
<img src="1.jpg" height="100%" />
<img src="2.jpg" height="100%" />
<img src="3.jpg" height="100%" />
<img src="4.jpg" height="100%" />
</body>
Demo: http://jsfiddle.net/ambiguous/4Udam/
Just set really big value to body width:
body {
width:5000px;
}
But this will introduce horizontal scrolling, you should know, that people hate to scroll horizontally. Why do you not use some kind of lightbox effect?
Apply clear: left to your images as well.
<img src="1.jpg" height="100%" style="float: left;" />