We Keep Coding

Click button on page load with div content changed

I have links which change content on click. I want one of the links to be cliked on page load and stay as active. Looks like it works in the below fiddle but when I add it on website this one is loaded :
http://jsfiddle.net/0e91svrr/
I think I have some mistake in JS:
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('a[class^=question]').click(function(e){
e.preventDefault();
var id = $(this).attr("class").replace("question","")
$('.new_member_box_display').html($('#answer' + id).html());
})
document.getElementById("modal").click();
});//end of ready
</script>

The code you have written is perfectly fine. I would just suggest try JQuery's trigger click.
$('#modal').trigger('click');

First of all don't used Pure JS with JQuery mixed up, it look so messy :D also I sugest you think about your tags class and ids :)
Try first add event to links and then call click in document ready like this.
$('a[class^=question]').click(function(e){
e.preventDefault();
var id = $(this).attr("class").replace("question","")
$('.new_member_box_display').html($('#answer' + id).html());
})
$(document).ready(function() {
$("#modal").click();
});

How to override jquery _blank?

I'm including a widget in a page using PHP. The widget includes the following jQuery code, which is making all links open in an external page. Is there any way to override or neutralize this code so it no longer affects all links on the page?
Ideally, I'd like to wrap the widget in a div and specify those links to open in a _blank.
I am new to jQuery, so I appreciate any help offered.
$(document).ready(function() {
// change all links to open outside iframe
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});

If you do as you say and wrap your widget in a div like this:
<div class="container">
<!-- Your widget -->
</div>
You can select only the links inside that container like this:
$(".container a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
.container a selects anchor elements (links) that are children to that containing div, and will run your function on them.

Try it code
$(window).ready(function() {
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Peace of Paris

How to hide div

I need some script.
To hide a div by clicking anywhere on the page
To hide a div by clicking on button, images or particular script
To hide a div by clicking anywhere on the page ( when div contain any other script)
I am currently using
<script>
$(document).ready(function () {
$("#div").click(function () {
document.getElementById('div').style.display = 'none';
});
});
</script>
This working fine why div contain images, but it not working when div contain script like advertisement script such as chitika, adsense or any other
Please tell how to do.

Try this use this this selector is used to hide the clicked div
$("#div").click(function () {
$(this).hide();
});

To hide it, you would do some javascript and
Also you need to include Jquery library
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
$("#YourDivID").click(function (){ //inspect the ID might differ.
$(this).hide();
});

This code answers to your first and third question:
$( document.body ).click(function() {
document.getElementById(name of your div).style.display = 'none';
});
And the second question:
<div id="testdiv">test</div>
<script>
function hidediv(){
document.getElementById("testdiv").style.display = 'none';
}
</script>
<input type=button value="Click me" onclick="hidediv()">

featherlight.js background & close button css?

I want to use a simple js to deactivate and activate the overflow of the html "body" like this:
$('.my_link').click(function(){
$('body').css('overflow-y', 'hidden');
});
$('.featherlight_background & featherlight_close_button').click(function(){
$('body').css('overflow-y', 'scroll');
});
But I dont finde out the css name of the "featherlight_background" and the "featherlight_close_button" - ... ".featherlight:last-of-type" and ".featherlight-close-icon" dont work ;(.
That´s the script I work with: featherlight
Can anybody help me?

I would suggest solving it using the configuration options of Featherlight instead of adding jQuery events to its elements.
Looking at the Configuration section of Featherlights documentation it seems you can define a function to be called when the lightbox is opened or closed, see beforeOpen, afterOpen, beforeClose and afterClose.
You can either define those functions using a data attribute on the element, e.g. data-featherlight-before-open, by overriding the global defaults, e.g. $.featherlight.defaults. beforeOpen, or by adding them as a parameter to your featherlight call, e.g. $.featherlight('#element', { beforeClose: ... });
I've added a small example that uses the global configuration method to change the text Lightbox is closed into Lightbox is open when opening the lightbox.
$(function() {
$('#btn').featherlight('#lightbox');
$.featherlight.defaults.beforeOpen = setLightboxOpen;
$.featherlight.defaults.afterClose = setLightboxClosed;
});
function setLightboxOpen() {
$('#text').text('Lightbox is open');
}
function setLightboxClosed() {
$('#text').text('Lightbox is closed');
}
.hidden {
display: none;
}
<link href="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.js"></script>
<button id="btn">Open lightbox</button>
<p id="text">Lightbox is closed</p>
<div id="lightbox" class="hidden">
Lightbox contents
</div>

Bootstrap mobile dropdown parent link issue

I am using the following JS to make my bootstrap v3 navigation expand on hover.
I have done this so that the parent link can be a link.
<script type="text/javascript">
jQuery(function($) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function(){
location.href = this.href;
});
});
</script>
I have an issue on mobiles though, where you click on the parent link and you momentarily for a split second see the children links - but you go straight to the parent link... so you don't have the ability to choose a child link below the parent.
Site: http://crawfordtech.fastnetstaging.co.uk
The parent link in question is called "Solutions".
Any ideas what can be done?

you can wrap it in a condition, so it'll runs when u need it
I just copy pasta'd from a previous project so ignore or feel free to use the script that is inside. it also makes drop downs.
<script type="text/javascript">
//boostrap hover script
jQuery(document).ready(function($){
if ($(document).width() > 800){
(function(e,d,b){var a=0;var f=null;var c={x:0,y:0};e("[data-toggle]").closest("li").on("mouseenter",function(g){if(f){f.removeClass("open")}d.clearTimeout(a);f=e(this);a=d.setTimeout(function(){f.addClass("open")},b)}).on("mousemove",function(g){if(Math.abs(c.x-g.ScreenX)>4||Math.abs(c.y-g.ScreenY)>4){c.x=g.ScreenX;c.y=g.ScreenY;return}if(f.hasClass("open")){return}d.clearTimeout(a);a=d.setTimeout(function(){f.addClass("open")},b)}).on("mouseleave",function(g){d.clearTimeout(a);f=e(this);a=d.setTimeout(function(){f.removeClass("open")},b)})})(jQuery,window,200);
}});
</script>