I have an autocomplete text input that triggers a slider using jcarousel to scroll to the image of the selected person. The problem is, if you search once, it works, but searching again makes all the images disappear.
Here is the code that controls the input:
jQuery('#team_select2').change(function() {
var idx = $('#team_select2').val();
if(idx == '')
{
carousel.scroll(1);
$('.details').hide();
return false;
}
carousel.scroll(idx);
$('.details').hide();
$('#'+idx+'_details').show();
});
You can see it breaking in action if you go to http://welchhornsby.com/new-team-page/ and try searching for two of the people in the list.
Anyone have any idea why it would be breaking like that?
Found the answer right after posting this. Just changed the 4th to last row from carousel.scroll(idx); to carousel.scroll(idx*1);
Related
I am working with a plugin image slider and am attempting to show specific text that will be associated with image. For instance, image 1 will show paragraph 1, image 2 will show paragraph 2, etc.
I was going to upload a snippet showing what I am doing, but the plugin code was too much. Therefore, here is a jsfiddle link that shows what I am doing. The main code in question is at the bottom of the javascript and the text that I want to show is at the bottom of the html. This code:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('#slide-1');
var activeSlide = $('.slide--active') == true;
if(court == activeSlide) {
court.show();
console.log('It is working');
}
});
I have the text set at display: none; on page load and then when the specific image is displaying (I believe I narrowed this down to the class .slide--active), that text set to show().
Does anyone see what I am doing wrong?
This is because you are not targeting the right active class when each slide takes turn to slide in, I have amended your code below:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('.slide');
var activeSlideClassName = 'slide--active';
setInterval(function(){
if(court.hasClass(activeSlideClassName)){
console.log('It is working');
}
}, 1000);
});
Also your slide will need to have a callback function to capture the event whenever the new slide comes in. In this case I have used setInterval() to monitor the DOM, it isn't the best solution but you get the idea....
Working code here
you can check it $('.ma5slider').on('ma5.activeSlide') same as below :
jsfiddle
I have one page website which changes URL #id or anchor text on scrolling and on navigation click. I have an image positioned fixed at the center of the site. The site is divided in different sections and the image shows in all the sections. I do not want to show the image on the first section as it is unrelated to the content of the 1st section but will be showed in all next sections. How can I make it work?
What I have tried till now but not working:
$(document).ready(function(){
$(".phone").hide();
var idSample = window.location.href.split("#");
var id = "#"+idSample[1];
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});
Rest in Fiddle: https://jsfiddle.net/shubhamjha1000/vh7bu32q/
I don't want that phone to be seen on 1st section but on rest of the sections. Please help me guys!
You can use the answer written in this question to listen to changes in the window see what url you are on and show or hide the phone accordingly....
Example:
$(function(){
// Bind the event.
$(window).hashchange(hashchanged);
// Trigger the event (useful on page load).
hashchanged();
});
function hashchanged(){
var hash = location.hash.replace( /^#/, '' );
//your code
if(hash == "#first") {
// Hide element
} else {
// Show element
}
}
But still even though what you are planning to do will work with that solution I think it would still look bad on the app it self and instead of a hovering phone maybe you can create the phone as an img inside the relevant containers and hide and show with id...
You can simply use a substring on your location.hash for get your hash tag
$(document).ready(function(){
$(".phone").hide();
var id = window.location.hash.substr(1);
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});
I have an interesting problem that I cannot seem to find an answer for on Google. I have a scrollable div that a simple table in it. There are 'heading' rows ('.sl-bucket') that when clicked the script shows the associated rows below that, hiding other shown rows. In Chrome and IE, there is no issues. In Firefox on a fresh load, when you click the first element, it scrolls the div back to the top. Everything else works great after that.
Any thoughts on how I could fix this?
Here is the example jsFiddle.
Here is my javscript:
$(window).on('click', '.sl-bucket', function() {
var bucket = $(this).attr('rel');
if ($('.sl-'+bucket).is(':visible') == false) {
$('.sl-unitRow:visible').hide();
$('.sl-'+bucket).show();
} else {
$('.sl-'+bucket).hide();
}
return false;
});
Working for me by using
$('.sl-'+bucket).css("display", "block");
instead of
$('.sl-'+bucket).show();
Here is a link to my code: http://www.canning.co.nz/Mapping/Code.txt
Sorry, it is in text format, for some reason I had some trouble in pasting it into this forum.
It is working nicely. However, I am after a little bit of help with a problem that I am having. Currently, the textboxes come up for the start and destination after I click on a button. I am wanting to have these textboxes all display when the page loads and then just press on the button and the route will be displayed.
Can I please have some help with this? Or is there a better example that I can have a look at somewhere on the net?
thanks
You can adapt your current example to work this way. First you need a couple more JavaScript functions. You can place these below the directions() function.
JavaScript:
function searchFunc(point) {
if (point) {
if (state==1) {doEnd(point)}
if (state==0) {doStart(point)}
} else {
var result=geo.getCache().get(search);
if (result) {
var reason="Code "+result.Status.code;
if (reasons[result.Status.code]) {
reason = reasons[result.Status.code]
}
} else {
var reason = "";
}
alert('Could not find "'+search+ '" ' + reason);
}
}
function GLoad() {
var search = document.getElementById("search").value,
search2 = document.getElementById("search2").value;
addresses[0] = search;
addresses[4] = search2;
geo.getLatLng(search, searchFunc);
geo.getLatLng(search2, searchFunc);
}
Next you need to remove the three calls to handleState(). There is one call right below the function declaration. The other two are in doStart() and doEnd(). You can also remove the function itself. This function was doing the show/hide of the fields and buttons.
Finally, you need to update the tag to call GLoad().
<body onload="GLoad()" onunload="GUnload()">
Now if you click Get Directions the page should function the same as before, except we've taken care of the first couple button clicks and all the fields remain visible.
You probably want to also remove the buttons for "Find start address" and "Find destination address" but I wasn't sure. Removing them is as simple as removing the buttons from the HTML.
Feel free to ask any questions. I hope that helps!
This page is using jQuery to modify the links and then perform the page slide.
If you click on the 'Next' button a couple of times, then try to click the 'Prev' button, it does not do anything until you click the 'Prev' button around 3 times.
Can anyone suggest a reason why and how to make it instant?
The problem here is you're changing the href in the click event, if you want to navigate to these, you need to change it in something earlier, say mousedown, like this:
$(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll({offset:-250});
var LinkCounter = 0;
$('#prev').mousedown(function(){
PrevCounter = LinkCounter--;
this.href='#box' + LinkCounter;
$('#next').attr({href: '#box' + PrevCounter});
});
$('#next').mousedown(function(){
PrevCounter = LinkCounter++;
this.href='#box' + LinkCounter;
$('#prev').attr({href: '#box' + PrevCounter});
});
});
You can test it out here - or test a full screen version here.
have you tried changing jquery version to latest to match other jquery elements.
is the cufon affecting the links ?
I'm not especially familiar with the ScrollTo plugin, but have you tried modifying the click functions to return false at the end?