Develop Reference

Problem hiding a click-triggered div when anywhere on the page is clicked while still keeping everything selectable

Say a menu is triggered when a button is clicked, now
1_ For canceling it, the user has to be able to click anywhere on the page (not only on the same button),
2_ Everything else on the page must still remain selectable throughout this process.
Here's what I've tried:
$(".dad").click(function() {
$(".son").show();
$(".mask").show();
});
$(".mask").click(function() {
$(".son").hide();
$(".mask").hide();
});
.dad {
background: greenyellow;
width: 20px;
height: 20px;
margin-top: 100px;
z-index: 2;
}
.son {
position: relative;
left: 20px;
bottom: 100px;
width: 100px;
height: 100px;
display: none;
background: tomato;
z-index: 2;
}
p {
z-index: 2;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>
<p>This is a paragraph</p>
<div class="dad">
<div class="son"></div>
</div>
<div class="uncle"></div>
<div class="mask"></div>
This code satisfies the first condition(the ".son" hides when anywhere on the page is clicked), but the second condition isn't met. Because when the ".son" is visible, the paragraph is not immediately selectable, unless the user does another click. Although this seems like a minor problem, sometimes it can become a little annoying, thus is a requirement. (I've also tried other ways. E.g. CSS "pointer-events: none" on the mask, but it has a different purpose, because it also cancels click events). So how could it be done? Thanks in advance.
Note: This is not solely a CSS question, I embrace any Javascript or Jquery answers too should they give easier/better solutions.

Hope it helpful...
$(".dad").click(function() {
$(".son").show();
});
$(document).click(function (e) {
var container = $(".dad");
if(!container.is(e.target) &&
container.has(e.target).length === 0) {
$(".son").hide();
}
});
.dad {
background: greenyellow;
width: 20px;
height: 20px;
margin-top: 100px;
z-index: 2;
}
.son {
position: relative;
left: 20px;
bottom: 100px;
width: 100px;
height: 100px;
display: none;
background: tomato;
z-index: 2;
}
p {
z-index: 2;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>
<p>This is a paragraph</p>
<div class="dad">
<div class="son"></div>
</div>
<div class="uncle"></div>

How can I draw arc like this image below?

I won't make some of this arcs on my website and I don know how to do it I tried to do it but I can't !
Referance Image

You could use a before/after pseudo element on one of the blocks. Then on that element you'd give it the same background color and use transform: skew(-2deg); to give it the tilted affect.
See the example below, it's fairly simple enough once you understand how you can use pseudo elements to your advantage.
section {
position: relative;
float: left;
width: 100%;
background: black;
height: 300px;
}
.skewedSection {
background: red;
}
.normalSection:before {
content: "";
background: red;
height: 100px;
-webkit-transform: skewY(-2deg);
transform: skewY(-2deg);
position: absolute;
left: 0;
right: 0;
bottom: -50px;
z-index: 2;
}
<section class='normalSection'>
</section>
<section class='skewedSection'>
</section>

jquery animate opacity arrows mouseenter mouseleave

I'm trying to add an opacity effect with jquery when we past on arrows navigation but it seems that nothing happens :(. Do you know what's wrong with my Jquery script.
Here my Jquery :
$(document).ready(function(){
$(".flscroll").mouseenter(function(){
$("flscroll").animate({opacity:1},300);
});
$(".flscroll").mouseleave(function(){
$(".flscroll").animate({opacity:.8},300);
});
});
I defined my arrows like in my css :
.flscroll {
display:block;
height: 83px;
opacity: 0.8;
position: fixed;
top: 40%;
z-index: 1000;
}
.ie8 .flscroll {
filter: alpha(opacity=80);
}
#flscrollg {
background: url(images/sprite.png) no-repeat 50px -100px;
left: -30px;
padding-left: 50px;
width: 52px;
}
#flscrolld {
background: url(images/sprite.png) no-repeat left -200px;
padding-right: 50px;
right: -30px;
width: 53px;
}
My html arrows declaration is like that :

So I mentioned in the comment that it might be your Jquery missing the fullstop in this line of code
$("flscroll").animate({opacity:1},300);
//Should be
$(".flscroll").animate({opacity:1},300);
I have added it in this FIDDLE and it works fine.
Is this what you are after?

try this
$(document).ready(function(){
$(".flscroll").on('mouseenter',function(){
$(this).animate({opacity:1},300);
}).on('mouseleave',function(){
$(this).animate({opacity:0.8},300);
});
});

How to get the position of an element relative to another using jQuery?

Please have a look at this:
http://liveweave.com/5bhHAi
If you click the "Get Pos" link you will see the red div's position relative to the image.
Now say this image's size has changed at some point down the line. How can I get the new position for the red div based on the initial data?
HTML:
<div id="watermark"></div>
<img src="http://placekitten.com/g/320/270" class="small-img">
<div><br><br>Get Pos</div>
jQuery:
$(document).ready(function() {
var $watermark = $('#watermark');
$('.get-pos').on('click', function(e) {
e.preventDefault();
var watermark_position = {
top: $watermark.position().top - $('.small-img').position().top,
left: $watermark.position().left - $('.small-img').position().left
};
alert(watermark_position.top + 'px from the top');
alert(watermark_position.left + 'px from the left');
});
});
CSS:
#watermark { background: red; position: absolute; top: 215px; left: 265px; width: 50px; height: 50px; }

Here is a solution to what I understand you want from question/comments:
http://jsfiddle.net/tXT2d/
var imgPos = $(".image img").offset();
var wmPos_tmp = $(".watermark").offset();
var watermarkPosition = {
top: wmPos_tmp.top - imgPos.top,
left: wmPos_tmp.left - imgPos.left
}

You can accomplish your intended goal (placing the watermark at the right place even after size changes) without using javascript at all if you do just a little reworking. A working example of the following solution is here
(just change the width of the .img-container to see it function).:
.watermark {
background: red;
width: 50px;
height: 50px;
}
.img-container {
width: 295px;
height: auto;
position: relative;
}
.img-container img {
width: 100%;
}
.img-container .watermark {
position: absolute;
right: 10px;
bottom: 10px;
}
<div class="img-container">
<div class="watermark"></div>
<img src="http://placekitten.com/g/320/270" class="small-img">
</div>
Your html containing the image will look basically like this:
<div class="img-container">
<div class="watermark"></div>
<img src="http://placekitten.com/g/320/270" class="small-img">
</div>
And the css to get the placement to happen looks like this:
.watermark { background: red; width: 50px; height: 50px; }
.img-container {
width: 275px;
height: auto;
position: relative;
}
.img-container img {
width: 100%;
}
.img-container .watermark {
position: absolute;
right: 10px;
bottom: 10px;
}
Here, the image will always match the width of its container, and the watermark will always place itself ten pixels from the right and ten pixels from the bottom of the container.

Javascript only works in Chrome and not Firefox

For some reason, this piece of code work just find in Chrome, but not in Firefox. I have no idea why, so I hope someone can help me.
The div "slideshow" and it's content wont show at all in Firefox. It's like the JS is not even loaded.
HTML
<div id="slideshow">
<div class="slideshow_text">
<p class="txt1">Er du klar?</p>
<p class="txt2">til et <span>NYT</span></p>
<p class="txt3">&</p>
<p class="txt4">BEDRE <span>JEG</span>?</p>
</div>
<img id="slide_1" src="img/ss/large_slide1.jpg" alt="Woman">
<img id="slide_2" src="img/ss/large_slide2.jpg" alt="Woman">
<img id="slide_3" src="img/ss/large_slide3.jpg" alt="Woman">
</div>
JS
$(document).ready(function() {
$("#slide_1").animate({left: 0}, 700);
$(".slideshow_text").slideDown("slow");
$("#slide_1").click(function() {
$("#slide_1").animate({left: "-980px"}, 700);
$("#slide_2").animate({left: 0}, 700);
$("#slide_3").css("left", "980px");
});
$("#slide_2").click(function() {
$("#slide_2").animate({left: "-980px"}, 700);
$("#slide_3").animate({left: 0}, 700);
$("#slide_1").css("left", "980px");
});
$("#slide_3").click(function() {
$("#slide_3").animate({left: "-980px"}, 700);
$("#slide_1").animate({left: 0}, 700);
$("#slide_2").css("left", "980px");
});
});
CSS
#slideshow {
width: 980px;
height: 445px;
margin: 50px auto 25px auto;
position: relative;
overflow: hidden;
}
#slide_1, #slide_2, #slide_3 {
position: absolute;
top: 0;
left: 980px;
}
.slideshow_text {
display: none;
width: 200px;
background-color: rgba( 255, 255, 255, 0.4);
position: absolute;
top: 100px;
left: 650px;
z-index: 9;
border-radius: 4px;
padding: 15px;
}
.slideshow_text p{
float: left;
width: 100%;
color: #FFFFFF;
}
If you need more details, let me know. Frankly I don't really know what else to write.

Does it help if you put a width and height on your images?
#slide_1, #slide_2, #slide_3 {
position: absolute;
top: 0;
left: 980px;
height: 445px;
width: auto;
}

What version of jQuery are you using? If you use jQuery 1.9.1 it will work in FireFox, however, with jQuery 2.0.2 it will not [at least checking with an older browser it did not]
Check out this example I created based on your code [no code changed, just using jQuery 1.9.1], does this solve your problem?

Apparently it was my "#wrapper" that collapsed on it self, hiding all the content within.
Adding a height did not do the trick, but adding a border did the trick and the content would show.