I'm working on adding some icons to my company's website, but I'm having trouble getting them to link to a page.
I'm using an image sprite and CSS to change the image on hover. If you click here and look under Services We Offer you can see the image hover.
I'm using a div to do this, with this code:
<div class="video-box"></div>
And in my CSS:
.video-box {
width: 184px;
height: 222px;
background: url("http://bluestarmultimedia.tv/wp-content/uploads/2015/01/rollover-video-2.png") no-repeat scroll left top transparent;
display: block;
}
.video-box:hover {background-position: -184px 0px;}
When I add a link like this, it doesn't work.
<div class="video-box"></div>
How can I get the images to link and keep the roll over?
These are some of the scripts that the website use. I think you will need to import the required JQuery scripts that are used in this website.
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.tools.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/themes/x/framework/js/dist/site/x-head.min.js'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/x-shortcodes/js/dist/site/x-shortcodes-head.min.js'></script>
Just test your code in Fiddle and it worked fine, maybe you need to specify more about what you really face with.
Or you could make div with link function by using span and z-index.
HTML
<div class="video-box">
<span></span>
</div>
more CSS
.video-box span {
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
I think there is no problem with your code.It is working as you want.With This
<div class="video-box"></div>
And this
<div class="video-box"></div>
Here is JSFIDDLE
Related
I have an image that is 1007px x 81px that I am using as the logo of a website and I cannot center it WITHOUT using margin-left. I have tried margin: 0, auto;
.navbar-brand {
width:100%;
height:auto;
margin-left: 35%
}
I am assuming you mean center horizontally, since your element has a width, you can simply set its margin-left:auto; and margin-right:auto;
But setting something to width:100%; will actually take up the full size of its parent, and that means you need to center the parent, not the child.
I've put a little snippet (at the bottom of my post) to do this. There are a few confusing things about this question as it stands.
I'm not sure if you intended to modify the navbar-brand class already present in bootstrap, or if you are intending to make a new class, with its own name.
If your image is so wide, it's probably alone on a row of your website, with nothing else beside it, which makes the layout much simpler.
If the below isn't what you're looking for, perhaps the issue can be more thoroughly debugged by you posting the HTML in question, a screenshot, or a fiddle of it not working as intended.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.navbar-brand {
text-align: center;
float: none;
height: auto;
}
.navbar-brand>img {
display: inline;
}
</style>
</head>
<body>
<div class="navbar-brand">
<img width="1007" height="81" />
</div>
</body>
</html>
I am setting up adsense for my website at the moment and am trying to set a background-image behind the ad so that if someone visits the page with ad-block there is a image politely asking them to turn it on if they would like to support the website. Currently, I have wrapped the adsense code in a div and set a background-image on it, however when I do that my adblock software is able to detect it and block the image behind it. Would anyone be able to tell me the correct to do this? Cheers
HTML -
<div class="ad-alert">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Listings Banner -->
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-9407013200292589" data-ad-slot="7535806952"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
CSS -
.ad-alert {
width: 728px;
height: 90px;
background-image: url("../images/ad-alert-banner.png");
}
Okay, solved it myself. The trick was to set the div background color through the CSS and then set a background-image which has the text you want with a transparent background. Below is an example.
CSS -
.ad-alert {
width: 728px;
height: 90px;
background: #cccccc;
background-image: url("../images/randompeople.png");
margin: auto;
margin-top: 30px;
}
My HTML:
<html>
<head>
<link rel="stylesheet" href="C:\Users\coeconsultant3\Desktop\Loadingexample\abccss.css">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$("#loader").fadeOut("slow");
})
</script>
</head>
<body>
<div id="loader"></div>
<div id="page1">
<p>
<h1>Hello World !!!
</h1>
</p>
</div>
</body>
</html>
CSS for loader :
#loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('C:/Users/coeconsultant3/Desktop/Loadingexample/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
I have used script which does different behaviour:
When I use div id = loader, it shows directly the hello world.
When I use div class = loader, it just shows loading gif image and does not go through the page.
I want to know the error for this program
Your code works perfectly fine. And for information $(document).ready() is better to use.
The way you've linked your CSS, I assume you're directly opening the HTML file, i.e. by double clicking on the file (correct me if I'm wrong). If this is the case then you've to correct your jQuery linking to:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Two problems with your both scenarios :
Problem 1 : When you apply class="loader" :
Here the problem is that when you use class="loader" your css applies to the div. and in javascript you are using $("#loader") instead of $(".loader")
Problem 2 : When you apply id="loader" :
Here the problem is that you remove the class="loader" and add id="loader" so your css will not be applied to the div.
Solution :
Update your div with class as mentioned below :
<div id="divloader" class="loader"></div>
Update your javascript as mentioned below :
<script type="text/javascript">
$(window).load(function () {
$("#divloader").fadeOut("slow");
})
</script>
problem: you are missing a semicolon ; at the end of the function
change to
$(window).load(function () {
$("#loader").fadeOut("slow");
});
and add this too
$(document).ready(function(){
$("#page1").fadeIn(3000)
});
don't forget to give style="display:none;" for div page1
Hope it helps..!!
Instead of
$(window).load(function () {
//your code
});
use
$(document).ready(function(){
//your code
});
This gives the fadeIn effect you wish to have:
$(document).ready(function(){
$('body').css('display', 'none');
$("body").fadeIn("slow");
});
And here's a Fiddle.
Hope this helps!
Try this:
HTML:
<div id="dvLoading"></div>
CSS:
#dvLoading
{
background:#000 url(images/loader.gif) no-repeat center center;
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
SCRIPT:
<script>
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
</script>
Here is a reference and demo.
I am trying to manually add a site tagline into the header image of my website. Below is the Jquery and CSS that I am using. Have not been able to get any text to show up.
www.jobspark.ca
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#banner-area").prepend("<div id='banner-tagline'>Tagline</div>");
});
</script>
#banner-tagline { color: #fff; font-size: 40px; text-align:center; z-index: 99999; }
UPDATE
Awesome thanks that did the trick. Only issue left is that is show up in front of my fixed navigation when scrolling down and I would like it more centred vertically on the page
Add a position: absolute to your #banner-tagline element CSS.
EDITED: Additionally, z-index only takes effect if with an absolute or fixed position.
z-index only works on positioned elements, so add position:relative (or position:absolute depending on how you will position your tagline) to the style for #banner-tagline.
You just update your "banner-tagline" css as follows. I have just added top position. Hope it will work for you.
#banner-tagline {
color: #FFFFFF;
font-size: 40px;
position: relative;
text-align: center;
z-index: 99999;
top: 50%;
}
Is it possible to manually scroll a JPG inside a div with 'little hand' cursor by grabbing and draging the actual image?
Just when for example you have long horizontal bitmap and want to show it in small window so people scroll like in photo editors when you zoom in.
You need some JavaScript magic to do this. Check this out: http://jsfiddle.net/bCuGM/.
<style type="text/css">
#container {
width: 400px;
height: 400px;
overflow: hidden;
cursor: pointer;
}
#draggable {
width: 1024px;
height: 819px;
}
</style>
<div id="container">
<div id="draggable">
<img src="http://farm3.staticflickr.com/2593/3884464511_a77144821e_b.jpg">
</div>
</div>
<script>
$("#draggable").draggable();
</script>
You can do it by using javascript and a bit of css.
On your image add a css rule with :
cursor: pointer;
using javascript, add mousedown, mousemove and mouseup events on your image. Then use javascript to change the scroll on the parent div