I have a HTML div like,
<div id="tab2" class="tab">
<div class="alarm" id="alarm">
<img src="src/alarm.jpg" style="width: 100%; height: 100%; background-size: contain;">
</div>
</div>
So I want to open this div when a button click. I tried to add a link to the button like this way,
Get Start
But this is not working. How can I do this. Please help me !
HTML Code:
<div id="tab2" class="tab" style="display:none;">
<div class="alarm" id="alarm">
<img src="src/alarm.jpg" style="width: 100%; height: 100%; background-size: contain;">
</div>
</div>
Get Start
Javascript:
function showDiv() {
document.getElementById('tab2').style.display = "block";
}
Try like this with javascript
<div id="tab2" class="tab" style="display: none;">
<div class="alarm" id="alarm">
<img src="src/alarm.jpg" style="width: 100%; height: 100%; background-size: contain;">
</div>
</div>
Get Start
<script>
document.getElementById("button1").addEventListener("click", function() {
document.getElementById("tab2").style.display = "block"
});
</script>
Add this css and try :
#tab2{
display:none;
}
#tab2:target{
display:block;
}
Related
I know there are dozens of similar questions and some of them have helped me get to this point but I can't see any rhyme or reason to this error.
I've tagged an image with the id HeaderGradient and I'm trying to set it's size in the css file but it's not working. When I inspect the element in Firefox there is no mention of my css file. I'm using the Bootstrap framework. What am I doing wrong?
body {
#HeaderGradient {
width: 80%;
height: 141px;
}
}
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="panel-heading">
<img class="img-responsive" src="images/logo.png" id="Logo" alt="EP Logo">
<img class="img-responsive" src="images/header_gradient.png" id="HeaderGradient" alt="Gradient Image">
</div>
</div>
<div class="col-sm-4"></div>
</div>
You are using invalid CSS code for this, It should be
#HeaderGradient {
width: 80%;
height: 141px;
}
#HeaderGradient {
width: 80%;
height: 141px;
}
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="panel-heading">
<img class="img-responsive" src="images/logo.png" id="Logo" alt="EP Logo">
<img class="img-responsive" src="images/header_gradient.png" id="HeaderGradient" alt="Gradient Image">
</div>
</div>
<div class="col-sm-4"></div>
</div>
It's not a valid CSS syntax update the syntax as follows to get #HeaderGradient within body tag.
body #HeaderGradient{
width: 80%;
height: 141px;
}
You have the ID selector in the wrong place. Instead of:
body {
#HeaderGradient{
....
}
}
Move the selector outside:
body {
....
}
#HeaderGradient{
....
}
If you want to use that kind of CSS syntax you need to use a CSS preprocessor. Check out LESS or SASS
How can I use an entirely separate CSS file to change/override only the URL for the image IMAGE.png?
<div id="id1" class="class1">
<div id="id2" class="class2">
<div class="class3">
<div id="id3">
<a class="logo" href="http://domain.com" tabindex="-1">
<img src="https://IMAGE.png"></img>
</a>
</div>
</div>
</div>
</div>
Thanks so much!
If you wants to achieve it with css, do it like this (Recommended).
.btn {
display: block;
width: 80px;
height: 80px;
background: url(http://mygimptutorial.com/images/button-with-metal-ring/13.jpg) no-repeat;
background-size: contain;
text-align: center;
color: #fff;
text-decoration: none;
}
.btn:hover {
background: url(http://mygimptutorial.com/images/button-with-metal-ring/8.jpg) no-repeat;
background-size: contain;
}
<div id="id1" class="class1">
<div id="id2" class="class2">
<div class="class3">
<div id="id3">
<a class="btn" href="http://domain.com" tabindex="-1"></a>
</div>
</div>
</div>
</div>
And with js do following.
$('.logo img').hover(function(){
$(this).attr('src','http://mygimptutorial.com/images/button-with-metal-ring/8.jpg');
},function(){
$(this).attr('src','http://mygimptutorial.com/images/button-with-metal-ring/13.jpg');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="class1">
<div id="id2" class="class2">
<div class="class3">
<div id="id3">
<a class="logo" href="http://domain.com" tabindex="-1">
<img src="http://mygimptutorial.com/images/button-with-metal-ring/13.jpg"></img></a>
</div>
</div>
</div>
</div>
use content in your dark-mode class
darl
content:url(image.jpg);
You can't change it with CSS, you need Javascript for that.
But if you are trying to change the image on for example hover, you could remove the img-tags and use a div instead on which you set a background-image.
In your CSS you can then create a block where you change the image on hover.
Hi I am trying to duplicate the flame icon animations on the left and right of this wix webite:How can i position the flame icon to the far right or left and also make it have a fade animatiion
http://jirungu2012.wix.com/firebrandoption2
This is the htm code
<section id="ourfires" class="portfolio page-section add-top add-bottom">
<div id="right">
<img src="http://static.wixstatic.com/media/d57153_09c71d3fe10848c3a04b18f8d8a6c2b3.png_srz_p_487_587_75_22_0.50_1.20_0.00_png_srz" />
<!-- inner-section : starts -->
<section class="inner-section">
<!-- container : starts -->
<section class="container">
<div class="row">
<article class="col-md-12">
<h1 style="text-align:left;"><span class="animated" data-fx="bounceInRight">Our fire</span></h1>
<article id="article"><hr class="hr"></hr></article>
<div class="clearfix"></div>
<div id="mid">
<p class="promod-text dark-text">Our fire is all about <b>Big Brand Ideas</b> that not only have an <b>edge in the market</b> and make a difference in the <b>bottom line</b>,but ieas are: </p>
<p>
<ul id="navlist" class="promod-text dark-text" >
<li>Locally relevant</li>
<li>Creatively imagined and executed</li>
<li>Internationally recognized</li>
</ul>
</p>
<br><br><br><br><br>
</div>
</article>
</div
></section>
<!-- container : ends -->
</section>
<!-- inner-section : ends -->
</div>
</section>
The css
#ourfires{
background: url('../images/bg/03.jpg');
background-color:#ffffff;
}
Here is my take on what I understood from your question.
HTML:
<div id="left">
<img src="img.jpg" />
</div>
<div id="right">
<img src="img.jpg" />
</div>
CSS:
#left, #right {
max-width: 100px;
position: absolute;
display: none;
}
img {
max-width: 100%;
}
#left {
left: 0;
top: 40%;
}
#right {
right: 0;
top: 40%;
}
jQuery:
$(document).ready(function () {
$("#left").add("#right").fadeIn();
});
FIDDLE here
EDIT:
I have used your code and compiled the required behavior in this BOOTPLY. Please have a look.
you can simply add some Jquery animations after document is ready or window is loaded:
$(document).ready(function() {
// animate your image
});
$(window).load(function() {
// animate your image
});
Example of animation :see this Fiddle
EDITED LINK
I'm trying to put a background image on my form (like behind the text and inputs, just like a background image of my web site), using the Bootstrap framework but the image appears at the bottom and I want it inside the "container".
My code is something like this:
<div class="container">
<div class="thumbnail">
<form....>
<fieldset>
.
.
.
</form>
<img src="cs.jpg" class="img-responsive">
</div>
<div>
Have you tried setting the background image of that container as the image? IE:
.container {
background-image: url("cs.jpg");
}
Or you can do it inline:
<div class="container" style="background-image: url('cs.jpg');">
...
</div>
or you could try like this..
<body>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
</div>
</div>
</body>
and in css like this:
.jumbotron {
position: relative;
background: #fff url("slide.jpg") center center;/*slide.jpg =>you image*/
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
Within the structure below what is the best way to be able to align the div#logo into the middle of the grid_12 visible div for only non mobile devices.
Can I create a custom piece of code to override the above classes?
I have created a Plunker with my code - http://plnkr.co/edit/lrRm0nXdYaz5g7dYe4DS
HTML:
<header class="row visible">
<div class="grid_12 visible">
<div class="row logo-wrap">
<!-- logo -->
<div class="grid_6">
<div id="logo">
<img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles" />
</div>
</div>
<!-- search -->
<div class="grid_6 visible">
<div id="search">
<div class="button-search">Search</div>
<input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';" />
</div><!--/search-->
</div>
</div><!--/row-->
</div><!--/grid_12-->
</header><!--End Header-->
Give the div with the id of logo a width and set its margin-left and margin-right css properties to auto.. also setting a max-width to 100% will ensure the responsive behaviour..
#logo{
width: 100%;
max-width: 300px; /* Original width of the logo image */
margin-left: auto;
margin-right: auto;
text-align: center;
float: left;
}
and i hope you have already done this but..
#logo img{
max-width: 100%;
height: auto;
}
UPDATE:
Modify your markup like so
<div id="container-top">
<div id="logo">
<img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles">
</div>
<!-- search -->
<div id="search" class="visible">
<div class="button-search">Search</div>
<input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';">
</div>
<!--/search-->
</div>
#container-top{
position: relative;
}
#search{
top: 15%;
right: 0;
}
But then you'll have to use media queries to adjust your #search css as layout changes..
Also i have made some CSS changes above (before update section)..
Only you have to write one line margin: 0 auto;
#logo
{
margin:0 auto;
}