Conflict window.size and some jquery - javascript

I have a problem I cant figure out. So hope someone can help me.
I have this code in the footer of an iframe:
<script type="text/javascript" src="https://sinsio.dk/iframe-resizer-master/js/iframeResizer.contentWindow.min.js" defer></script>
<script>
jQuery( ".sidebar a" ).click(function() {
window.parentIFrame.size(1250);
jQuery('.content').css('display', 'none');
});
</script>
I want to resize an iframe and hide some content when clicking a link in the sidebar.
Scenario 1 (working):
If I only have window.parentIFrame.size(1250) in the click function it resizes the iframe.
Scenario 2 (working):
If i add alert(jQuery(this).attr('class')); to the function it resizes and alert the class from the clicked element. Did this to test if jQuery worked - it did.
Scenario 3 (not working but needed):
If I instead of the alert add jQuery('.content').css('display', 'none'); it removes the content div as i want but the resize no longer works.
Any ideas what is wrong? Doesn't make sense to me.
Kind regards,
Michael

I had a conflict with a height attribute on the body element of the iframe. Removing this was the solution.
Thanks for taking the time to look at my post.
Kind regards,
Michael

Related

Selecting a div with an ID and automatically clicking on it on page load with JQuery

I have a div on my page with the ID of #activateeditbutton. I want this div to be automatically clicked when the page loads.
Here is the code I have written in jQuery, but it does not seem to work. If someone can point out my mistake I would greatly appreciate it. Thanks.
<script type="text/javascript">
jQuery(document).ready(function(){
$('#activateeditbutton').simulate('click');
});
</script>
Try this,
jQuery(document).ready(function(){
$('#activateeditbutton').trigger('click');
});
You need to use .trigger()
$('#activateeditbutton').trigger('click');

Codrops Horizontal Slide Out Menu - Show submenu on page load

I'm working on a project based on one of the Codrops blueprints: http://l3s11023.zeus03.de/test/
I want to have the first submenu 'Lovely Spirits' already open when the page loads. I tried to do this with jQuery $( document ).ready(function() and a trigger event but without success.
Any help would be greatly appreciated. thanks.
Here is a fiddle with a part of your code and an example how you could trigger the click in
$(document).ready(function(){});
Make sure you include jQuery
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
$(document).ready(function(){
$('.cbp-hsmenu').children('li').children('a').on('click',function(){
$(this).next('ul').css('display','block');
});
/* HERE IS the interesting part*/
/* Trigger click on that function opening your sub-nav */
$('#gesu').trigger('click');
});
http://jsfiddle.net/Zms3T/
(Your question is not good. Next time please try to show only that part of code which is needed)
UPDATE THE ANSWER AFTER LOTS of trying on your site
The Code above was just an example of how you could try it. I was sure you trigger the function to open that navigation. However, replace the document ready with this: That will do what you where looking for.
$(document).ready(function(){
var elemHeight = $('.cbp-hsmenu li:first-child ul').height()
$('.cbp-hsmenubg').css('height', elemHeight+'px');
$('.cbp-hsmenu li:first-child').addClass('cbp-hsitem-open');
});

code working in jsfiddle but not when previewed in browser

I've been struggling all day to make a nav bar that applies certain styles to the link that is currently in use (so if you're on the 'about' page the 'about' link is styled differently to the rest).
I have finally managed to do this in jsfiddle now but when I apply the same code in my text editor and then preview the file in the browser the relevant effect doesn't work, even though it does in JSfiddle.
I've done a fair bit of research but cant find out why, I don't think I have any invisible characters anywhere and ive set the fiddle to 'no wrap in head' and included a document ready command in the script but still nothing.
If anyone could have a look and lend some advice that would be really appreciated, this is driving me nuts!
Fiddle is here: http://jsfiddle.net/smokescreen/jkLam/
This is my script code:
<script type="text/javascript">
$(document).ready(function() {
$('li a').click(function(e){
$('a').removeClass('current');$(this).addClass('current');});
});
</script>
Oh and the problem is that although in the fiddle when you click on a link it is highlighted green with white text until you then click on another link when previewed in browser this doesn't happen.
The hover effect still works so the link shows up green with white text when hovered over but even when clicked once the mouse is moved away the link reverts to its original state even though it has been clicked and should now be green with white text?!
Add this inside of your <head> element:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Update Try removing the class from the element with the class:
$(document).ready(function() {
$('li a').on('click', function(e){
$('.current').removeClass('current');
$(this).addClass('current');
});
});
Since you didn't get any js error it seems that your css rule for .current class is less important than some other css rule. In order it to take an effect add the !important behind the css values like
.current p{
color: white!important;
background-color:#2d7a78!important;
}
ok guys thanks for all your help, im not exactly sure who's answer helped as Im a bit confused but it now works with the following code (i'll go back and tick whoever's answer ended up helping the most - but thanks to all for your help, the guys on this site really are great!!)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#nav_bar ul li a').click(function(e)
{$('a').removeClass('current');$(this).addClass('current');});});
</script>
For those wishing to know the solution I think I needed to reference the div the list was in and not just a list so adding #nav_bar before the ul li a seems to have solved the problem

Unable to show the div on body load

This is my code posted in a jsfiddle Demo.
As you can see when you click on the
Hyderabad.
Visakhapatnam.
Then a Horizontal Image slider is shown ( YOu can slide throgh the Pictures )
Now my requirement is I need to also show the Image slider on body load itself also
I have tried using body onload function to show the div , and also in Jquery ready function , and by commenting all the hide() functions in javascript , but none of them really worked .
Could anybody please tell me what is the way to do this .
I just tested it.. first I thought that you should just do this:
jQuery(document).ready(function() {
$fp_galleries.first().click();
});
but poorly this will only show the first image and not all images.
I don't know why but it looks like you should do this.
$(window).load(function() {
/* your code */
$fp_galleries.first().click();
});
Maybe because you need to wait until the images are loaded.
perhaps use document on ready to call the function: http://api.jquery.com/ready/
$(document).ready(function() {
openGallery(galleryname){
})
;
The problem is not that it is hidden, its rather that the content are only generated by som javascript when the user clicks one of your links.
You could add something like
$("li",$fp_galleries).first().click()
at the bottom of your script.
This will trigger the click event on one of the links.

jquery help with back to top

why is this not working?
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
if( jQuery(".page").height() < jQuery(window).height() ) {
jQuery(".backtop").hide();
}
else {
jQuery(".backtop").show();
}
});
</script>
I'm using two frameworks, mootools and jquery. I don't know how to use mootools and it must be there. I know a little of jquery and just want the "back to top" button to appear when the body (.page) is bigger than the window.
Can anybody help me???
EDIT: CAN ANYONE GIVE ME A MOOTOOLS SIMILAR SCRIPT?????
http://jsfiddle.net/yyEPR/
This code works.I copied the code from http://briancray.com/2009/10/06/scroll-to-top-link-jquery-css/
Is .backtop a class or the id of the element? to access the id try $("#backtop").hide();
Good luck and HTH.
-- Joe

Categories

Resources