I have a problem with the execution of JavaScript within a collapsible-set. I want to run inside the collapsible-set some kind of carousel effect.
But unfortunately the code is executed only in the open tab. Opening the other tabs to see there is nothing. Although the initialization of the effect takes place for all elements.
Here you will find the Fiddle
With code: http://jsfiddle.net/2qVBN/4/
Fullscreen: http://jsfiddle.net/2qVBN/4/embedded/result/
There are also problems with the re-initialization of the code when you switch between portrait and landscape mode.
Does anyone have any idea how I can make sure that the code inside the collapsibles is always loaded and executed?
Thanks in advance
vis_dev
here JS on the divs which are displayed none can not be applyed.
In your case I suggest, you can expand each of your collapsible div by js and apply js to that.
thats how you can expand your collapsible div.
$('div').trigger('expand');
jsfiddle example
Related
I've searched for latest info but can't find a full answer relevant to my situation and since I'm new to js and php I need a little more direction.
I created a site using Bootstrap and the popover section proved a problem on mobile (specifically Safari - it doesn't dismiss). I decided to use BS panels for mobile and used Bootstrap's .hidden-lg and .visible-sm classes to show that popovers are visible on desktops and panels are visible on mobile sizes. However the script clashed, as soon as both are in my html file, it won't load won't of them, eg. popovers won't work but panels does. I tried to place it differently, thinking maybe the order in my code matters. In the end I found that little sentence in BS docs that says "don't use data attributes from multiple plugins on the same element". I figured that means I can't use two types of plugins in my one page even though the two sections are not supposed to be displayed on the same page - it should load only one depending on the device size.
I searched for a method to use jquery to detect screen size to insert a php file. I created two php files (one for large screens, one for small, placed the popover and panel sections in each) I created my original index as a new index.php.
I can't tell where I went wrong because it's not working and I've made so many changes to the code to try and fix it that it's probably a mess right now anyway.
I tried another method: I found some old info to create m.domain.com which means you have to include link rel="alternate"... in desktop file and rel="canonical" in mobile to link to mobile_file.php
It loaded the correct files (though mobile is duplicating my footer for no apparent reason) but the js script is still not activating properly. Now mobile is loading panels but not dismissing it (and it worked for sure when I tested the single file before) and desktop popover is not opening up (meaning the js is not working) at all!
How can I use a simple method to say: if the screen size is this, use this file and if not, use that file. I'm sure this is possible with js but I just can't find a clear, easy to understand and follow method online. Clearly my js knowledge is lacking but a simple site is proving complicated in the final steps. All help would be appreciated because it's really hard to find updated info on this exact issue.
for more info: I used the Bootstrap html boilerplate which links this by default as script: src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
The panels would only work if I use src="js/jquery.min.js"
I know these two are the culprits because when I deleted the first then the panels would work and when I deleted the second the popovers would work but they will not work for both with either one of these. I don't know what to change to make it work.
I am using bootstrap modal for my website. Recently, I used a jQuery plugin to build nav bar and some problems showed up. First, after I use jQuery.noConflict(), the program not recognize $ anymore and I have to replace all $ which jQuery. Second, when execute the command .modal("show"), the modal not showing completely, the whole screen is fade and I can type anything to modal's inputs. Here the screen capture:
Can anybody explain to me what happened here? Thanks very much.
It seems their is a problem with the css. Make sure that you are loading bootstrap css only once.
I am following along in the latest Agile Web Development with Rails 4 book. In Chapter 11 (AJAX), the book instructs us to use the following code in the "create.js.erb" file:
if ($('#cart tr').length == 1) { $('#cart').show('blind', 1000); }
This code causes the #cart div to jump down without any content. After 1 second it appears. There is no sliding effect.
I tried using slideDown(); as well, but the div just appears immediately. Out of curiosity, I tried slideUp(); when the div was visible. Voila. The div slid up.
This appears to be a jQuery bug and wondered if anyone else has experienced this, or has any suggestions for me.
Thanks.
It sounds like you're describing a scenario where content is being loaded via ajax, where the toggle is not simply displaying content already present in the dom. Is that the case? Otherwise, is the content within the wrapper also hidden... perhaps with css?
Have you tried slideToggle(); for the simple dom show / hide? ... If it's ajax related, you may need to delay the toggle from firing until the content itself has loaded.
Is there a jQuery script that will make colorbox windows draggable?
I found a one called easydrag that works but it gets sticky once the colorbox is dragged to the outer boundaries of the page. See my easydrag sample page.
I am looking to get the easydrag script working properly OR find an alternative script that works well with colorbox.
You can use jQuery UI Draggable for that - if draggable is the only function you seak, UI may be overkill, but it works:
$('#colorbox').draggable();
My website is www.codtelevision.com.
If you look at the home page, it is perfect, but when you go to another page, it is big and looks weird. How do I fix it, and what is wrong? Thanks! If you need some code, I will be glad to post some, or you can view it on my site.
I just looked at chrome developer tools, and found this error:
Uncaught ReferenceError: jQuery is not defined
How do I fix this?
You have jQuery included after your jQuery code on your other pages (it needs to be included before). So you end up with just a block of code that isn't functioning as a ticker. Put the call before it and you'll be good.
its because the ticker expands the height as more content gets added and everything is positioned absolute, you need to position something other then absolute, maybe relative , or arrange the elements so they have room to expand
I think you forget add ticker-active class to your other pages. And make sure you call the initialize javascript function.