I have div containing the background image but i want to make that image as clickable and pointed to somewhere site. Is it possible to do this in css or jquery
HTML:
<div id="logincontainer">
</div>
css :
#loginContainer {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat scroll center center #FF660D; /*for example */
border-color: #FFFFFF;
border-image: none;
border-right: medium solid #FFFFFF;
border-style: none solid solid;
border-width: medium;
left: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
min-height:200px;
right: 0;
top: 0;
vertical-align: super;
width: 100%;
z-index: 9999999;
}
Here is the http://jsfiddle.net/a39Va/16/
I am not sure is there is a way to make the background image as clickable which is pointed in div?
Any suggestion would be great.
Just do something like:
<div id="loginContainer'></div>
Or you can do that as well via JavaScript and jQuery
$('#loginContainer').click(function(e) { <Whatever you want to do here> });
You need to fix the z-index of the background element, and as others have said, add an anchor or a javascript action. Also, I added some sample of the rest of the content on the page. You need to see how the two interact with each other.
Here's an updated jsFiddle
HTML
<div id="loginContainer">
</div>
<div class="content">
<p>Something</p>
</div>
CSS
#loginContainer {
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat center #FF660D;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
}
#loginContainer a {
display: block;
height: 100%;
width: 100%;
}
.content {
z-index: 2;
position: relative;
width: 200px;
height: 100px;
background: #fff;
margin: 30px 0 0 30px;
}
Here's a Fiddle
HTML
<div id="logincontainer" data-link="http://google.com"></div>
jQuery
$(function() {
$('#logincontainer').hover(function() {
var divLink = $(this).attr('data-link');
$(this).wrap('');
});
});
Why not using an anchor ?
<a href="link" id="logincontainer">
</a>
i updated your jsFiddle
otherwise :
you can click on any element to behave like a link with jQuery.
you can surround your <div> in an anchor if you use the html5 <!DOCTYPE> ( Otherwise invalid )
Related
I am trying to make my modal to be responsive.
I am currently using "right: 405px" in css to make my modal to stick in the right section.
However, the position of the modal keep changes as the screen size of the browser changes, which means this is not responsive.
In the attached screenshot, you can see the "Google Translator Modal" when the "info icon" is clicked.
Could anyone help me write a responsive CSS code?
Thank you.
.google-translator-modal {
position: absolute;
background: #fff;
z-index: 10000;
right: 405px;
top: 40px;
width: 230px;
height: 50px;
border-radius: 3px;
}
<div class="google-translator-modal" style="display: none">
<span class="upward-white-triangle"></span>
<div class="google-translator-modal-content">
powered by
<a class="google-logo-link" href="https://translate.google.com" target="_blank">
<img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="60px" height="20px" style="padding-top: 3px; padding-left: 3px" alt="Google Translate">
Translate
</a>
</div>
</div>
This a crude example but it ultimately comes down to positioning an absolute positioned element inside of a relative positioned element and showing it on hover.
I have placed the "modal," what I would call a tooltip, inside of the element that appears to be triggering it's appearance. By placing the tooltip inside and relative to the element that triggers it, we don't have to worry about how far from the edge of the viewport we are. The tooltip will always be position relative to the icon in my example.
.translate {
float: right;
margin: 0 1.5rem;
}
.translate-icon {
position: relative;
cursor: pointer;
font-size: 1.5rem;
}
.translate-icon:hover .translate-tooltip {
display: block;
}
.translate-tooltip {
display: none;
position: absolute;
bottom: -1.75rem;
right: -0.35rem;
width: 13rem;
text-align: center;
font-size: 1rem;
border: 1px solid gray;
}
.translate-tooltip::before,
.translate-tooltip::after {
content: '';
position: absolute;
bottom: 100%;
right: 0.25rem;
width: 0;
height: 0;
border: solid transparent;
}
.translate-tooltip::before {
border-bottom-color: gray;
border-width: 9px;
}
.translate-tooltip::after {
border-bottom-color: white;
border-width: 8px;
right: calc( 0.25rem + 1px );
}
<div class="translate">
Select Language
<span class="translate-icon">ω
<div class="translate-tooltip">
Powered by Google Translate
</div>
</span>
</div>
I am trying to move content left and right using on click event and need to stop by margins on the left or right. list-items generating dynamically. Here is the code I tried so far but no worth. By my code it is moving the container left and right. But I need to move list-items left and right.
How can I do this.?
function moveList(px) {
$('.list').animate({
'marginLeft': px
});
}
.list {
white-space: nowrap;
overflow: auto;
height: 85px;
padding: 10px 0;
margin: 25px 0;
position: relative;
}
.list-item {
display: inline-block;
min-width: 20%;
max-width: 150px;
padding: 10px 0;
border-radius: 3px;
background: #eee;
border: 1px solid #ddd;
margin: 0 5px;
cursor: pointer;
text-align: center;
}
#right-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
right: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/right-arrow.png) no-repeat #000;
}
#left-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
left: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/left-arrow.png) no-repeat #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right-arrow" onclick="moveList('-=50px')"></div>
<div id="left-arrow" onclick="moveList('+=50px')"></div>
<div class="list">
<div class="list-item">1</div>
<div class="list-item">2</div>
<div class="list-item">3</div>
<div class="list-item">4</div>
<div class="list-item">5</div>
<div class="list-item">6</div>
<div class="list-item">7</div>
<div class="list-item">8</div>
<div class="list-item">9</div>
<div class="list-item">10</div>
</div>
Try script like this:
function moveList(px) {
$(".list-item:first-child").animate({
'marginLeft': px
});
}
It will be easier for you if you create a element that wraps the .list-items with:
position: absolute;
top: 0;
left:0;
Then, instead of modify the margin, you should modify the left value.
If you want to use semmantic content for your web it's better to use another HTML structure, not only div. For example:
<nav> <!-- As this is containing page navigation elements-->
<ol> <!-- As this is an ordered list of elements-->
<li> <!-- Each list element-->
First element
</li>
<li>
Second element
</li>
</ol>
</nav>
Simply translate them.
Define this (given that clicker is the selector for your click event).
var xValue = -5;
$("#clicker").on('click', function(e) {
e.preventDefault();
$(".list-item").css("transform","translateX("+xValue+")");
xValue -= 5;
});
Translate will not mess with your markup, and only move the objects it's working on to the left (in this case).
By keeping xValue you can keep moving them to the left by repeatedly clicking clicker.
I have following div which i am showing as popup:
<div id="divOperationMessage" style="background-color: White; border: 2px solid black;
display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;
padding-left: 10px;margin:auto;">
------------------Whatever content inside-----------------------------
</div>
When its shown, i can easily view other part of screen in the main background.
Its viewing as below:
(Entry updated sucessfully is popup div above)
I dont want to show background screen when poup is there.
I want to make it black..
How can i make it black??
I tried with setting opacity to 0.75 ... but that prooved misconceptual...did not solved my purpose..
What can i do for it???
Please help me.
Here you go!
Here's the HTML code:
<div id="overlay">
<div id="pop-up">
Content in Pop-up.
</div>
</div>
And here's the CSS code:
#overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #000000;
display: none;
}
#pop-up {
background-color: white;
border: 2px solid black;
display: block;
width: 350px;
z-index: 1001;
top: 60px;
left: 240px;
position: fixed;
padding-left: 10px;
margin: auto;
}
Hope this helps!
Here is what I would do:
Create a fixed div with 100% width and height;
put the popup div inside this fixed overlay and center it horizontally and vertically.
<div class="overlay">
<div class="popup">
Whatever code!!
</div>
</div>
css
.overlay{
position:fixed;
z-index:999;
width:100%;
height:100%;
background-color: black;
background-color:rgba(0,0,0,.75)
}
.popup{
width:300px;
position:absolute;
left:50%;
top:100px;
margin-left:-150px;
}
Update 2020:
I would use 100vh and 100vw as it is widely supported. Centering the popup would be done with CSS Grid Layout and aligning the box to center.
.overlay{
position:fixed;
z-index:999;
width:100vw;
height:100vh;
background-color: black;
background-color:rgba(0,0,0,.75)
}
Here's a FIDDLE
if($('#divOperationMessage').length > 0 && $('.mask').length < 1) {
$('body').append('<span class="mask"></span>');
}
.mask {
background: rgba(0,0,0,0.8);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You need to add an overlay div to place over the main content, and below the popup div.
div.overlay {
position: fixed;
width: 100%;
height: 100%;
display: block;
top: 0;
left: 0;
background-color: rgba(0,0,0,.75); /*this sets the slightly see-through black*/
z-index: 100; /*Make this less than the existing popup div*/
}
Try this
<div id="divOperationMessage" style="background-color: White; border: 2px solid black;display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;padding-left: 10px;margin:auto;">
------------------Whatever content inside-----------------------------
</div>
<div class = 'black_bg' style = "position:fixed;width:100%;height:100%;opacity:0.75;background-color:#000"></div>
And whenever you are showing the popup , add this line
$('.black_bg').show();
If you wanna use jquery,you can use jquery modal feature.
Easy to use!
Check here :
http://jqueryui.com/dialog/#modal
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
In this,if you click on the button,or outside of the popup menu,it closes.
You don't have to code down that too.
Short and compacT!
I have an icon, and when you hover over it, I would like to have a custom CSS tooltip appear to the right of the icon. Whether or not you scroll up or down the page, the tooltip will always need to appear to the right of the icon.
And no, I don't want to use any plugins. I just want a little JS/CSS to get the job done. If you use JQuery, it needs to be compatible with v1.7, and JQuery-UI: v1.8.
In addition, it needs to be compatible with IE 6 and 7.
I would prefer to leave my elements as siblings, but it looks like under certain circumstances the div that appears needs to be a child element, so it's OK if the HTML needs to be changed.
HTML:
<img src="" class="icon">ICON<img/>
<div class="demo">
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
</div>
CSS:
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
}
.demo:after, .demo:before {
border: solid transparent;
content: ' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
Live Example: http://jsfiddle.net/49Js3/16/
Since my reputation isn't high enough to comment on the answer above, I just wanted to add an updated fiddle (based on the above answer) that positions the tooltip absolutely, but with display: inline-block so that it is not fixed to certain position from the left and will show to the right:
here is the important bit:
a.tippy:hover + div {
display: inline-block;
position: absolute;
}
http://jsfiddle.net/7gmv3wo2/
Fiddle here: http://jsfiddle.net/49Js3/29/
I don't have access to IE6, so I don't know whether it's legal. I do know you'll need an anchor to get hover behavior with CSS in IE7 and earlier.
So, I added an anchor around your image, as well as a div to contain the tooltip.
HTML
<div class="outer">
<a class="tippy" href="">
<img src="" class="icon">ICON<img/>
</a>
<div class="demo">STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>
</div>
</div>
And here is the CSS:
.tippy {
text-decoration: none;
}
.outer {
width: 350px;
}
a.tippy:hover + div {
display:block;
float: right;
}
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
display: none;
}
.demo:after, .demo:before {
border: solid transparent;
content:' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
I can't seem to quite find what I need. Without trying too hard to explain it, I basically need the "Connect" social media bar in the top right of this website - http://www.cmssquirrel.com/web_works/
I won't be using it for that purpose exactly, but it works exactly like I need my function to do. Everything I found seems to be a vertical menu style thing. I need to horizontally expand content on click and hide it again on click once more. Not quite sure where to begin?
Here's more of a starting point than a polished solution, but it should get you going in the right direction.
DEMO
HTML
<div class="wrap">
<a class="open" href="#">open</a>
<div class="outer">
<div class="slide">
One
a
uaoeua
aoeue
aaoeeo
</div>
</div>
</div>
jQuery
var w = 0;
$('.slide').children().each(function() {
w += $(this).outerWidth();
});
$('.outer').width(w+5);
$('.wrap').width(w);
$('.slide').css('left', w);
$('.open').toggle(function() {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}, function() {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
});
CSS
.wrap {
position: relative;
left: 50px;
top: 20px;
}
.outer {
height: 40px;
position: relative;
overflow: hidden;
}
.slide {
border-radius: 19px 19px 19px 19px;
position: absolute;
top: 0;
right: 0;
background-color: black;
height: 40px;
}
a {
color: gray;
line-height: 35px;
float: left;
outline: none;
}
.slide a {
float: left;
display: block;
padding: 0 10px;
}
.slide > :first-child {
padding-left: 15px;
}
.slide > :last-child {
padding-right: 45px;
}
.open {
position: absolute;
right: -25px;
top: 0;
background-color: black;
border-radius: 19px 19px 19px 19px;
height: 40px;
padding: 0 15px;
z-index: 5;
}
You can extend jQuery's animation functionality to achieve this.
See a demo of this at:
http://dock.ronggur.com/tutorial/jquery%20tutorial%20-%20horizontal%20animated%20menu/
which is outlined at:
http://sandbox.ronggur.com/2009/01/25/jquery-tutorial-horizontal-animated-menu/
Essentially, you could just substitute the hover event in that demo, and use a click event.