We Keep Coding

How to set default link with javascript?

I try set a default link in a modal, but not working (I am very new in javascript).
This is my full code:
<button class="md-btn md-btn-success" id="openmodal" data-uk-modal="{target:'#my_id', keyboard: false, bgclose: false}" style="display:none !important;"></button>
<div class="uk-modal" id="my_id">
<div class="uk-modal-dialog">
<div class="uk-modal-header">
<div uk-grid class="uk-grid">
<div class="modal-block">
<h3>Project</h3>
<b>project description, lorem ipsum... instagram</b>
</div>
<div class="modal-block">
<h3>Terms</h3>
<b>terms description</b>
</div>
<div class="modal-block">
<h3>Cookies</h3>
<b>cookies description</b>
</div>
</div>
</div>
<div class="uk-modal-footer uk-clearfix">
<a id="default-link" uk-tooltip="{title: okay, i accept!; pos: bottom}" class="us--main-button uk-float-right entersite uk-modal-close" href="javascript:void(0)">Accept and enter</a>
<a id="dont-def" uk-tooltip="{title: I do not agree!; pos: bottom}" class="us--leave-button uk-float-right" href="https://google.com">Deny and leave</a>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#openmodal').trigger('click');
})
</script>
<script>
window.onload = function() {
document.getElementById("default-link").focus();
};
</script>
When I open the page in any browser, the default stated link will be the first (instagram)... Whats the wrong with this?

That code works when it comes to give the link focus, though if one hit enter (or click on it) nothing will happen since you've cancelled its action with href="javascript:void(0)"
Here is a sample that shows that the focus() does work.
Click "Run code snippet" and hit "Enter" and you'll get an alert.
window.onload = function() {
document.getElementById("default-link").focus();
};
<div class="uk-modal" id="my_id">
<div class="modal-block">
lorem ipsum... instagram
</div>
<div class="modal-footer">
<a id="default-link" class="uk-modal-close" href="javascript:alert('Accept')">Accept and enter</a>
<a class="uk-float-right" href="https://google.com">Deny cookies and leave</a>
</div>
</div>

I just now find out the really best solution for that, because the window.onload to slow, and when the site loading, the default link is over the first link in the current page...
So the best the html5 solution, very simple, and this really makes default from your any item, independently from the page or document loading:
<div autofocus>

jQuery - Having the same HTML twice renders my script inoperative

I'm quite new to jQuery and I have come up with script which affects the HTML below. The script works perfectly and I have gotten it to whether I would like. The problem I am having
is when I'm duplicating the HTML and the script, once clicked, only shows the last project-info and project-images within the document. I've tried quite a few different methods just as
$(this).children()
but I can't seem to get any to work. Any help would be much appreciated.
Thank you
jQuery
$(document).ready(function() {
$('.apple').click(function() {
$('#darken').addClass('dark');
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
});
});
$(document).ready(function() {
$('.close').click(function() {
$(".project-info, .project-images").fadeOut('slow');
});
});
HTML
<div class="apple">
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
</div>
<div class="project-info" style="display:none;">
<div class="project-title">
<h1>hello world</h1>
</div>
<div class="details">
<p>dkusdufhu suskueh sukh suefhuksdfnkuesnfukneukf nseuknfukenfuk nukefnuksn fukfuksukfnuksenf unseukfunfukfunufen u u u ef euhfuehfeufu g gfd gerjkg rjgrjg j js grg rgsg dkusdufhu suskueh sukh</p>
<div class="links">
link
</div>
<div class="close"></div>
</div><!-- end of project info -->
</div>
<div class="project-images" style="display:none;">
<div class="-images">
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
</div>
<div class="close end"></div>
</div> <!-- Project Images -->
</div> <!-- # Darken -- >

You're nearly there. Children wouldn't work in the above example because the divs with class 'apple' don't have any children. You need to move that first closing tag to the bottom of the portfolio item so that your html for each portfolio item is structured like this:
<!--PORTFOLIO ITEM-->
<div class="apple">
<!-- ICON GOES HERE-->
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
<!-- PROJECT INFO GOES HERE-->
<div class="project-info" style="display:none;">
</div>
<!-- PROJECT IMAGES GOES HERE-->
<div class="project-images" style="display:none;">
</div>
</div>
I.e. the divs with classes 'project-info' and 'project-images' are inside the 'apple' div. Then change this:
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
to this:
$(this).children('.project-info').delay('1000').slideDown('slow');
$(this).children('.project-images',this).delay('1000').fadeIn('slow');
If you've updated your html correctly, $(this) will be pointing to a div element that does indeed have children with classes 'project-info' and 'project-images'. Here's an updated JSFiddle that should do you what you want: http://jsfiddle.net/8k3Ms/1/

Fancybox works on one page, but not on another

I have one page where fancybox works,
http://interscript.pl/domy/?p=628
and another where it doesn't. Where is mistake?
http://interscript.pl/domy/?cat=4
EDIT:
<a href="http://interscript.pl/domy/wp-content/uploads/Tulips.jpg" data-title="asdfasdfas dfsad 12341234 23" data-link="" class="fancybox" rel="grupa">
<div class="wpis">
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
<div class="hover"></div>
</div>
</a>
JS: $('a.fancybox').fancybox();

You've applied fancybox to all "a tags " -> $('a.fancybox').fancybox();
But your "image" is not "a" -> http://interscript.pl/domy/?cat=4
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
insert this code in your jquery codes
$(".obszar img").fancybox();
or edit your code such this;
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>

Getting a link from another div

I have
<div class="box box1">
<div class="content">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div>
</div>
What I want to do is make the entire div of box clickable.
I have looked around here in StackOverFlow and seen some great examples but I have tried them and I could not get them to work.
For Example:
$div.next('div.box2').find('a').attr('href', $div.find('a').attr('href'));
Any help would be great on how to do this in jquery

$(".box").click(function(){
window.location=$(".whereeveryourelookingfor").find("a").attr("href");
return false;
});
you can make the mouse pointer also look like the one on href , use the following css
.box{ cursor:pointer; }
http://jsfiddle.net/r9Xhf/

<div class="box box1" style="cursor: pointer">
<div class="content">
<a href="example">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div></div>
JS
$('.box').click(function(){
window.location.href = "http://www.example.com";
});

Correctly target previous div

html:
<div class="wrap">
<div class="fotorama"><img src="img1.jpg">/></div>
<div class="fotorama-fullscreen">Open fullscreen</div>
</div>
<div class="wrap">
<div class="fotorama"><img src="img2.jpg">/></div>
<div class="fotorama-fullscreen">Open fullscreen</div>
</div>
<div class="wrap">
<div class="fotorama"><img src="img3.jpg">/></div>
<div class="fotorama-fullscreen">Open fullscreen</div>
</div>
jQuery
$(".fotorama-fullscreen").each(function(){
$this = $(this);
$this.on('click', function(){
$("#wrapper").fadeTo(1000, 0, function(){
$("#main").isotope("destroy");
$this.prev().trigger('fullscreenopen'); <== My trigger
$("#wrapper").fadeTo(1000, 1);
});
});
});
I have a bounch of galleries which I open in fullscreen by pressing a button. The above code works on desk but when I'm on an iPad it doesn't open the gallery which leads me to think .prev(); doesn't work on an ipad? Or am I doing something wrong in finding and addressing the correct path?