JQuery 'Jcarousel' plugin bug, help needed - javascript

I am using JCarousel to display some ads.
Everything works fine, except when there is no ads, ie JCarousel has zero content.
This will cause the Next Button to be active, as if there where unlimited items inside the carousel. I haven't altered any code at all, just the css for the colors and attributes.
Does anybody know what I am talking about, or anyone who can help me fixing it...?
Otherwise I will replace it with some other Jquery Carousel plugin!
Thanks

you will need to detect the presence of the adds and then disable the button if there are none. You can do all this from the API. I would probably pass this functionalit in as part of the init callback.
eaxmple:
$('#ad-continer').jcarousel({initCallback:
function(carousel, state){
if($(carousel.list).length < 1){
// set next and previous to disabled.
}
}
});
Youll need to look at the source for jcarousel to see what the other methods are you can call i know there is a way to disable the controls independently though. and there are actually a lot of options you can pass in not just 2... http://sorgalla.com/projects/jcarousel/#Configuration

Related

Bootstrap 4 / Popper.js interfering with Autosuggestions

I have a feature that does address verification with smartystreets api I am also using a template with bootstrap4 / popper.js and jquery of course.
If you click both links, you will see the behavior. It will either break the address verification plugin or the design, but I cant figure out how to make them both work together.
The difference between the two is that one has class="form-control" whereas the other one does not. Something with the form-control class is triggering the behavior. The broken design link shows error in the console and aborts whatever process causes "display:none" to be added so the address suggestions work.
If I dont trigger that error, the address verification plugin removes the "display:none" but its immediately followed by something else in bootstrap or popper.js interfering and changing it back to display:none giving it just a blinking effect.
If anyone could take a closer look and point me in the right general direction.
if anyone else is using a template that contains autofill.js in the sourcemap of the material-design-bootstrap.js above just comment out this portion of the script as I mentioned above and it will work. Its a hack, not really an answer but it didnt seem to affect any other functionality as far as I could tell.

Cloning a DIV with multiple inputs in Jquery Mobile

I'm new to javascript and I can't seem to figure out this thing which I reckon should be a no-brainer.
I'm using Jquery mobile. I would like to clone a div and update the IDs of the elements in it. This seems to work fine. However, I can't get the cloned select element to work properly. I doesn't seem to work - I can't select anything - after its been cloned. When I call an extra $('html').trigger('create'); on the page the select elements starts looking 'funny' (probably because it got enhanced a second time) but does works.
I've posted a simplified version of my code here: http://jsfiddle.net/cUBPF/1/
Does anyone have a suggestion for me?
Thanks!
I'm not experiencing any problems however I'm just using my desktop. My first thought is to avoid calling the $('html').trigger('create'); at all and simply do what you want to within the clone_button click but then again, I'm not really sure what you are doing.
Instead of doing all this, why not output 10 or 20 of these fields and the display:none/display:block them......I assume you will run into less compability issues this way and you really don't want to allow infinite amount of fields....your going to run into browser memory issues which is just going to cause more bugs.

I can't set active class in IE7+

I've got these anchor elements in my page with href to some contents on the same page. I myself can't believe how many methods I'v tried since yesterday to set a simple active class. But non of them worked in IE7+ and even IE10. I checked markups, css and scripts But just no success and That is so so confusing.
I tried 2 scripts like addClassthat() and removeClass() in one simple script and worked in all browsers except ie7+ and in other method I tried siblings() which worked too except in ie7+.
I even tried the scripts that are already working [in dynamic navigation] in other projects. But for this static absolute URL I'm getting no result in IE7+.
I'm just tired to try more in this and in fact very curious to know what the wrong is.
By the way, the extra usage of nested html elements is just for designing purpose and nothing else.
Here you can see one of the method tried.
Help Plz
Edit: After 2 days trying and trying I suddenly found the solution.
Setting class "x" for all anchor elements and writing the script below would solve the problem.
$('.x > a').click(function (e)
{
e.preventDefault();
});
However, I appreciate that if anyone could explain the main logic behind using the script above.
Remove the target="_top" attribute from your links. That will cause the page to load in a new window or tab, effectively killing any jQuery that you're applying.
jsFiddle example

Select options disappear on mouseover in IE 8

I'm working on a Joomla 1.7 site and I'm having a strange problem in IE8. When trying to select an option from a select box, the options appear for a second and then when you try to select one they disappear. It only happens on a specific page - I've disabled every other module on the page to count out any conflicts (thought for sure it was a conflict with the slideshow, but no luck). If anybody can shed some light on this I'd really appreciate it! Below are some examples - click on the 'Quicksearch' select dropdowns.
This page works fine:
//link removed - solution below
This page doesn't:
//link removed - solution below
Thanks!
Solution -- Thank you both for your input. I figured it out after pulling my hair out for a couple hours! The template was calling IE specific css behavior 'behavior: url(/css/PIE.htc);' for the module wrapper divs. I just forced the select box styles in the template html IE8 specific css and it works now. Nothing like a waste of time with IE! Thanks again.
Seems like some outer div has a MouseOut event. Please Check this out and maybe you will find your answer.
Try adding
position:relative;
z-index: 0;

CheckBox Issue in IE6

I am dynamically generating checkboxes for a popup window (displayed using AJAX) using javascript and on a button click I also need to call a function that checks all the check boxes before the popup is rendered.
All pages in use are JSPs and the popup is also included using the tag so it is generated already when the parent page gets loaded.
The problem is that I'm able to check all the custom generated checkboxes using the same function in IE7 and IE8. But it does not work for IE6.
I'm using something like:
var i;
for(i=0; i<size; i++){
document.getElementById('chk'+i).checked = true;
}
That code ought to work fine, even in IE6 (which, lets be honest, is a really awful browser).
However, if you have inserted those checkboxes into the page dynamically, IE6 has a known issue with dynamically added checkboxes, where it doesn't respect the .checked property.
See this page for a few possible solutions: http://bytes.com/topic/javascript/insights/799167-browser-quirk-dynamically-appended-checked-checkbox-does-not-appear-checked-ie
Hope that helps. :-)
(But my solution is: Don't support IE6. Honestly, it's usage is down to a few percent now and getting lower, so unless it's more well used by your particular demographic, just cut your losses and drop it; the remaining users will upgrade soon enough. ;-))
Without wanting to sound like a 'use jQuery' pat answer, if you were to do this with a library like jQuery, any IE6 inconsistencies would probably be nicely abstracted away.

Categories

Resources