When link is clicked, I need jQuery to click on specific part of a div, lets say exactly 1px from its right side.
I'm familiar with jQuery, but I'm not sure how offsets really work in this case?
HTML
<div class="container">
<div class="toBeClicked">Click the right side of me!</div>
</div>
EDIT: I've added JSfiddle for reference: https://jsfiddle.net/ebc59bah/1/
Check this code.I create two color boxes.The red is the container and the aqua is the div that you want 1px right aside to have an event.I get the pageX position and via if condition I trigger the alert() method.Note the CSS setting specially the html and body because I don't want to have any margin in pixels that must adding to the if condition:
$('.container').on('click',function(e){
var xPosition=e.pageX;
if(xPosition>01 && xPosition<150){
alert('Click');
}
});
html, body {
margin: 0;
padding: 0;
}
.container{
height: 150px;
width: 250px;
background-color:#FF0000;
}
.toBeClicked{
position: inherit;
font-size: 150%;
height: 140px;
width: 150px;
background-color: #00FFFF;
word-break: keep-all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="toBeClicked">Click the right side of me!</div>
</div>
Related
when I put a button inside the div id="box" then the button appears as a tiny rectangular box, whereas when i put it outside the div id="box" then it appears correctly with the proper text contained within it.
Please take a look on this link:
<style>#box {
border: yellow 5px solid;
background-color: black;
padding: 10px;
width: 300px;
}
#box img {
width:
}
#box button {
/* adjust the button width to fit nicely */
width: 10px;
;
height: 4px;
padding: 2px;
}
</style>
<script src="task1.js" type="text/javascript"></script>
<body>
<h1> Owais Ughratdar </h1>
<div id="box">
<img id="light" src="light_0.jpg">
<div>
<button> ON </button>
</div>
</div>
</body>
In your CSS file, try experimenting with #box button...need to make width and height much bigger like so:
#box button {
/* adjust the button width to fit nicely */
width: 300px;;
height: 200px;
padding: 2px;
}
https://jsfiddle.net/noLqau4x/
I'm wanting to create a div panel with a link which when clicked slides a panel in from the right, I have this working fine but I want to have the clickable link pushed out with the div panel and it's this I cannot figure out although i'm guessing it's really simple.
The html I have is:
<div class="quick-contact">
<div class="slide-toggle">Slide Toggle</div>
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
</div>
the css is this:
quick-contact {
background: #ccc;
float:right;
}
.box{
float:right;
overflow: hidden;
background: #f0e68c;
display: none;
}
.slide-toggle {
float: right;
position: relative;
right: 0;
}
/* Add padding and border to inner content for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
and the jquery is:
// use this docu ready //
jQuery(function($) {
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
}); // end
I can get the panel to slide when I click the link but the clickable link just sits above the panel when it slides in, I need it to slide out with the panel, I need it to work like this http://www.sanwebe.com/assets/floating-contact-form/ The reason i'm not using that example is because I need to slidein panel to slide in the header div and not the body div like this example does.
Just place your <div class="slide-toggle">...</div> after <div class="box">...</div> (because you are using float: "right";). Make it look like this:
<div class="quick-contact">
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
<div class="slide-toggle">
Slide Toggle
</div>
</div>
Working example: http://codepen.io/anon/pen/GoPPPE
Here's a working example: https://jsfiddle.net/ruo8r7o8/2/
Essentially, what you want to do is:
Lose the float .. it complicates calculations
Animate the whole box, not just one part
Javascript action:
$(function(){
$('.slide-toggle').click(function(){
$('.quick-contact').animate({
right: $('.quick-contact').css('right') == '0px' ? "100px": "0px"
})
});
});
CSS action:
.quick-contact {
position: absolute;
right: 0;
}
.slide-toggle {
position: relative;
background-color: red;
}
.box {
position: absolute;
right: -100px;
width: 100px;
background-color: green;
}
I have two <div>s with absolute position. One is displayed and the other is display: none on load. When the link on the visible one is clicked it is moved and the other is displayed.
I have a third <div> with link that I would like to display directly below these. Since they’re both position: absolute I have not been able to find a way to do this. I have found various solutions, but most of them are workarounds for using absolute position. Since my <div>s need to show ontop of each other I unfortunately can’t remove the absolute positioning.
As such I have tried various combinations of position: absolute and position: relative on the three <div>s, but so far nothing has worked.
JSFiddle with my problem: https://jsfiddle.net/dagz9tLw/1/
<div> with id linkbar is the one that needs to be at the bottom.
The other two <div>s don’t have a set height so margin-top won’t work. linkbar also needs to be just below the <div>s and not right at the bottom of the page.
I experienced that using a div acting as a buffer is quite useful and easy to implement for this purpose. You just set it above your div#linkbar and adjust it's height on load and when the div#front get's repositioned:
$("#topBuffer").css("height", $("#front").offset().top + $("#front").height());
$("#showLink").click(function() {
if (!$("#back").is(":visible")) {
$("#back").show();
$("#front").animate({
'marginLeft': "+=30px"
});
$("#front").animate({
'marginTop': "+=20px"
});
$("#topBuffer").animate({
'height': "+=20px"
});
}
return true;
});
.front {
width: 400px;
display: block;
border: 2px solid #000000;
text-align: center;
position: absolute;
margin-top: 20px;
z-index: 10;
background-color: white;
}
.back {
display: none;
width: 400px;
border: 2px solid #000000;
text-align: center;
position: absolute;
z-index: 1;
margin-top: 20px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front" class="front">
<a id="showLink" href="javascript:void(0);">front</a>
</div>
<div id="back" class="back">
back
</div>
<div id="topBuffer"></div>
<div id="linkbar">
test
test
test
</div>
I have two divs. I want the left div to hide and show automatically according to the window size, i.e. I want it to be responsive.
On the other hand, I want to hide/show the left div manually if necessary. I added a black separator in the middle. When the separator is clicked the left div hides and the right div takes the whole width.
Until now, everything is ok.
BUT. When I hide/show the left div manually, it ceases to react to the responsive code.
Please check this JSFiddle and lend me some help.
Thank you very much.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.div1 {
background-color: #ffee99;
width: 300px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.separator {
border-left: 3px solid #000000;
border-right: 3px solid #000000;
width: 0px;
height: 100%;
position: absolute;
top: 0px;
left: 300px;
z-index: 100;
}
.div2 {
background-color: #99eeff;
width: calc(100% - 300px);
height: 100%;
position: absolute;
top: 0px;
left: 300px;
}
#media screen and (max-width: 500px) {
.div {
display: none;
}
.separator {
left: 0px;
}
.div2 {
width: 100%;
left: 0;
}
}
</style>
<script>
$(function() {
function hideLeftDiv() {
$('.div1').hide();
$('.div2').css('width', '100%').css('left', 0);
$('.separator').css('left', '0px');
}
function showLeftDiv() {
$('.div1').show();
$('.div2').css('width', 'calc(100% - 300px)').css('left', '300px');
$('.separator').css('left', '300px');
}
$('.separator').click(function() {
$('.div1').is(":visible") ? hideLeftDiv() : showLeftDiv();
});
});
</script>
</head>
<body>
<div class="div1"></div>
<div class="separator"></div>
<div class="div2"></div>
</body>
</html>
Have a play with having two classes for identifying whether something is hidden or not i.e. desktop and mobile. You can then check whether its actually hidden with is(':hidden') and respond accordingly.
Check this fiddle for a quick demo http://fiddle.jshell.net/tmx3p6ts/31/
Read this: getbootstrap.com/css/#grid You can use the grid system to make a page like you have, but when the screen is getting to small, you can getbootstrap.com/css/#responsive-utilities use this link to know when to hide things.
So to help you maybe a step in the right direction:
<div class="container">
<div class="col-sm-4 hidden-xs">
This is the left div.
</div>
<div class="col-sm-8 col-sm-12">
This is the left div.
</div>
</div>
Something like this should work. Check out this fiddle: Fiddle with bootstrap
You can adjust the classes to any style you want.
The up image shows the unwanted red selection out of the yellow area when you select cross lines. I want to select within the yellow part, like the following:
HTML:
<div id="parent">
<div id="child">
This is some content... This is a long lonnnnnnng content.
</div>
</div>
CSS:
#parent {
width: 200px;
background-color: #666;
}
#child {
padding: 50px;
background-color: #ff0;
}
::selection {
background-color: #f00;
}
Do you know how to achieve this?
Run code here: http://jsfiddle.net/3AESf/
You can use display: inline-block; on #parent to solve it
An alternative solution, if display:inline-block would not be an option, would be to add
overflow: hidden;
to #parent. That works too.