jquery flexslider link to specific image - hyperlink

is it possible to show in the flexslider a specific image, when a link from another homepage is clicked (like an anchor "www.mysite.html#slider3")? I have a page with textlinks. If the user clicks on a link like "go to slider 3", the site with flexslider appears and shows the slider 3.
Please can someone help me? I have already read this thread (jQuery FlexSlider - Link to specific image) but this doesn't work for me, I don't know why.
Thanks and sorry about my bad english,
CeDe

Flexslider provides a property called 'startAt' which accepts an index representing the slide to display first. You can also disable the automatic playing of the slideshow by setting the 'slideshow' parameter to false. If you grab the slide reference you want to start at before you create the slideshow, you can use these parameters.
// create a variable to store the slide index to start at.
startAtSlideIndex = 0;
// see if a tab anchor has been included in the url
if (window.location.hash != '') {
// Set the startAtSlideIndex variable to one less than the ordinal passed
// note: if you have more than 9 slides, this will fall down and you'll
// have to do some more complex string manipulation.
// A querystring variable might be easier, especially if you use
// someone else's url parser ;)
// Important: assumes the format of the hash is '#tabN' where N is the digit we want.
startAtSlideIndex = window.location.hash.substr(4,1)-1;
}
$("#flexslider-container").flexslider({
// other flexslider params
// set the flexslider startAt param to the value of the startAtSlideIndex variable
startAt: startAtSlideIndex
});
EDIT: I forgot that the location object has a 'hash' property in my original answer.

it's me again :-) It seems that it works for more than 9 slides too: I just changed the code a bit: // Important: assumes the format of the hash is '#tabNN' where NN is the digit we want. startAtSlideIndex = window.location.hash.substr(4,2)-0; Thanks and greetings!

Related

How do i set an eVar value in Adobe Analytics?

I couldn't find an answer to my question anywhere so i decided to post it here.
So, we have eVar33 set up within adobe analytics, when someone submits a form on our website how do i set eVar33 equal to the email address field?
$("form").submit(function(){
$("input#email").val(eVar33);
});
I'm assuming you have an appmeasurement library (aka s_code) on your page. In that case, Crayon Violet is right, something like this is what you want:
$("form").submit(function(){
s.eVar33 = $("input#email").val();
});
That will set the variable. To send it to Adobe, you need to fire either s.t() (for a page view) or, as is more likely the case for you, s.tl() (for things you want to track not associated with a page view- https://marketing.adobe.com/resources/help/en_US/sc/implement/function_tl.html and https://marketing.adobe.com/resources/help/en_US/sc/implement/link_variables.html.)
I suspect in the end, you'd do something like this:
$("form").submit(function(){
s.eVar33 = $("input#email").val();
s.linkTrackVars="eVar33"
s.tl(this,"o","form submitted")
});

Hiding a span in an accordion

I need help in hiding/unhiding neighboring spans. I'm building a series of FAQs using an accordion structure. I need to have each question truncated by default, but when clicked, the question must then appear in full. Finally, when the open FAQ (or another one) is clicked, the question should return to its truncated form.
My markup is of this form - where I have placed a truncated version of the question in one span and the untruncated version in a neighboring span:
> <div class="accord"><h4><span class="shortver">What steps do I need to
> take to ...</span><span class="longver hide">What steps do I need to
> take to install a constructed wetland?</span></h4><div
> class="faqcontent">Answer goes here</div>...</div>
The following function controls the FAQ:
function fnSetUpPageFAQAccordion(){
$(".accord > div").hide();
$(".accord > h4").click(function(){
$(this).find('span.shortver').addClass("hide").next('span.longver').removeClass('hide');
$(this).toggleClass("close").siblings("h4.close").removeClass("close");
$(this).next("div").slideToggle("1500").siblings("div:visible").slideUp("1000");return;
}); };
This code closes the truncated version of the question and opens the full version when the FAQ is clicked. What I can't figure out is how to reverse that sequence when the FAQ is clicked again (or another FAQ on the page is clicked).
Any suggestions - perhaps there is a better approach altogether?
Thanks/Bruce
Here's a slightly different approach, and a solution.
I think you could simplify this. Instead of having 1 span with the short version and 1 with the long version, put the beginning of the explanation in the first (let's call it class="questionStart")and the rest of it in the second (class="questionEnd"). That way you can leave the beginning always visible and only worry about toggling the class on the second. This is simpler but you'd need to remove the '...' which may not be worth it for the readability loss.
To address your issue of hiding the element when clicking something else, try adding an onClick event that first adds the hide class to all of the "questionEnd" spans, then toggles it on for just the one you've clicked on. I haven't tried it but I think you could make that work pretty easily either with your original approach or with mine.

Go to the specific chapter in PDF, iOS

I'm having quite a problem with viewing PDF in iOS. I want to be able to list user all chapters of a file and after he clicks one of them show this chapter directly in the view.
I now that I can get all chapters by:
PDFDocument* pdfDoc = [[PDFDocument alloc] initWithURL:... ];
PDFOutline* pdfOutline = [pdfDoc outlineRoot];
For now I was using webView, I was even able to write my own goToPage method but don't know how to do this feature. Maybe there is library I can use for this purpose or I can get information from PDFOutline object (I haven't found anything useful in documentation)?
I'm not sure why you think you're stuck because you're very close to what you want to do. You can check how many outline items there are and get all of them:
- (NSUInteger)numberOfChildren
returns the number of outline items and
- (PDFOutline *)childAtIndex:(NSUInteger)index
can be used to retrieve each item.
Once you have such an item, you can get its destination:
- (PDFDestination *)destination
If you read the documentation and the PDF specification, you'll see that an outline item can either have a destination or an action that specifies what needs to happen when it is executed (clicked).
You'll have to interpret what the destination means and use your gotoPage function to go to the correct page (PDFDestination has a "page" member that tells you exactly what page it refers to).

JQGrid: How to override saveparameters url for inlineNav addRow?

I need to explicity specify the url for adding a row via inlineNav.
But, I do not know HOW to do that, other than something called saveparameters has the url value I need to specify, documented here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing&s[]=addrowparams
However, function that uses that is saveRow, and that is called by inlineNav save button using default saveparameters, which has wrong URL (the window location, because grid has not editurl specified).
QUESTION: How can I configure jqGrid saveparameters with the url my inlineNav save button needs?
I could put 8 or 10 URLs here showing many asking same question and no answer. Is this stupid question, or not supported or possible?
Any help much appreciated.

selectToUISlider setting value incorrectly

I have a standard <select>..</select> element with which I have a slider created by selectToUISlider()
The problem is that when the slider moves the option in the dropdown does not change. Additionally it sets selected="selected" on each element as the slider is moved so that when the form is submitted multiple values are POSTed emulating a multiple select option.
I've spent ages trying to get to the bottom of this but no luck. Does anyone have any ideas?
I came across the same problem when trying to achieve similar functionality as mentioned by you.
The problem is whenever a slider is moved it keeps setting the "selected" attribute of the select list without clearing up previously selected item. I have added a script to clear previously selected option items before setting the new one as selected.
Look/search for the text at line number 92(..ish) of the jquery script file.
//control original select menu
var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
currSelect.find('option').eq(ui.value).attr('selected', 'selected');
and insert this code between 2 lines...
currSelect.find('option[selected]').removeAttr('selected');
so final code should look like this...
//control original select menu
var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
currSelect.find('option[selected]').removeAttr('selected');
currSelect.find('option').eq(ui.value).attr('selected', 'selected');
I hope it helps.
Feel free to ask any further question.
I know this is quite old but I recently stuggled with this and maybe my solution helps someone. I had this same problem when using more recent versions of jQuery (>jQuery 1.6.1) and JQueryUI and trying to use selectToUISlider with them.
I found my solution (using properties insted of attributes) just replacing in the selectToUISlider.js script, in line 98
This
currSelect.find('option').eq(ui.value).attr('selected', 'selected');
for this
currSelect.find('option').eq(ui.value).prop('selected', true);
You can find the "Why" on this answer, which helped me to find this solution:
https://stackoverflow.com/a/5876747/2285806
You can read also the jQuery API entry for prop() to find more information and read important notes on browser backwards compatibility:
http://api.jquery.com/prop/

Resources