I am looking to load a fancybox popup using a url, so upload load the fancybox pops up using:
www.mysite.com/index.html#hrefgoeshere
What would the script be?
Thanks for any help or guidance.
Kyle
Update
Thanks for everyones help!! Here is what ended up working great for me. I saved our my content into separate html files and then called them with fancybox.iframe
JS:
<script>
$(document).ready(function () {
$('.fancybox').fancybox({
'scrolling' : 'no'
});
if (window.location.hash !== "") {
$(window.location.hash).click();
}
});
</script>
you can try to use the fancybox method i think it is safer :
ex:
$(document).ready(function($) {
$.fancybox({
content: $(window.location.hash).html()
});
});
Related
I am running a Wordpress on twenty fifteen child theme. I found a Script to toggle menu on mouseover. I really like that feature.
But I want to add following option:
When the user is on childpage of parent1, I want the menu to be open on this point, as it is by default in twentyfifteen. You can see it here:
http://johannabaschke.de/impressum/
I now want that also with the script I found:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').hover(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
});
</script>
It toggles menu on mousover, but when clicking child-page, the menu isnt open, like here:
http://johannabaschke.de/transeuropa-2015/
I am not good in coding, thats why I only modify WP-themes with CSS which I am good at, but Javascript is not my bet practice. Maybe someone has a simple idea to solve this?
Would be super glad and thx for your help!
54v4nn4h
Please try like this:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').click(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
});
</script>
Could you please try following code:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').hover(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
//code to keep open respective menu open on page load
$("a[href='"+window.location.href+"']").closest('.sub-menu').stop().slideToggle(200);
});
</script>
Hi I am using this script to add social media icon into my site.
<div id="menu" class="shareSelector" style="width:250px; height:250px;"></div>
$(document).ready(function () {
$('.shareSelector').socialShare({
social: 'facebook,google,pinterest,twitter',
whenSelect: true,
selectContainer: '.shareSelector'
});
});
div gets the content upon clicking on it.Can we call this function without clicking div means on bodyload?
Regards:Ali
The $(document).ready(function () {}); function should run when the page loads.
Have you got the jquery in a <script> tag?
If so, the bindings are setup by the socialShare plugin, so you may need to look at that.
What does whenSelect option do?
$(document).ready(function () {
$('.shareSelector').socialShare({
social: 'facebook,google,pinterest,twitter',
whenSelect: true,
selectContainer: '.shareSelector'
});
$('.shareSelector').click()
});
Dont know about the socialShare plugin but you have an option there which says "whenSelect: true"
try false
this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});
I'm using the EasyTabs plugin by Alfa Jango on my website, and would like to have the panels seperated from tabs. He states in the documentation what I want to do;
Your panels can also be somewhere else in the DOM entirely (outside of
your tab container), if you specify an alternate panelContext.
The panelContext is any jQuery DOM element, in which easytabs will
look for the panels. By default, it's the container on which
easytabs() was called.
So, I understand I have to specify panelContext, say, to look for the panels in div#disconnected.
This is what I tried, but nothing works...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: '#disconnected';
});
});
</script>
Or trying to change the $container...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
$container: '#disconnected'
});
});
</script>
Any help would be greatly appreciated!
I have a same problem as you, and found the answer:
You should type as:
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: $('div#disconnected')
});
});
Found after looking the code here: Easy Tabs Github
Hope it helps
I am generating an iframe within a jquery dialog box but am having trouble loading some scripts within it.
function showDialog() {
$("#divID").dialog("open");
$("#modalIframeID").attr("src", "/staff/somepage");
return false;
}
$(document).ready(function() {
$("#divID").dialog({
autoOpen:false,
modal:true,
height:500,
width:960,
closeOnEscape:true,
});
});
I tried adding them through a load event but havent had any success.
function showDialog() {
$("#modalIframeID").load(function()
{
//load scripts here
$("#addFaci").formToWizard();
});
$("#divID").dialog("open");
$("#modalIframeID").attr("src", "/staff/somepage");
return false;
}
Any suggestions would be appreciated.
Thanks,
Tim
If you have access to the file that is being loaded into the iframe you could just add the javascript code into that file and attach it to the document ready event.
If not try reading this following article and see if it will help you out :)
http://huuah.com/jquery-and-iframe-manipulation/