The page contains multiple sections. Each section is represented by a TD block (see code below), the actual page would show a ">" icon (hovering over it shows the a href: javascript:void(0)), and when manually clicked, it would expand the section by a POST call to the endpoint from the SPAN block.
<td id="abc-parent" data-column="parent" data-row="abc" class="mt-cell mt-center">
<a href="javascript:void(0)">
<span class="a-declarative" data-action="myitable-fetch-rows" data-myitable-fetch-rows="{"endpoint":"/hz/inventory/variation?parentRecord=abc","rowId":"abc"}">
<div class="mt-variation-icon mt-variation-expand"/>
</span>
</a></td>
I am looking to create a bookmarklet containing a line of JQuery. And when called, it would expand all collapsible sections of a page.
What I mean is something like this (note this does not achieve what I described above):
javascript:jQuery('.a-declarative').each(function(i,e){e.click()})
I think you are looking for the "Trigger" function:
.trigger( eventType [, extraParameters ] ) Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
https://api.jquery.com/trigger/
So your code above should be something like:
$('.a-declarative').trigger('click');
Use at your own risk as this is not a very stable way to trigger events.
Create a global class .active for all the expandable areas (make sure they all have it, even if you have to add it after another class="another active")
Assure .active is the expanded state. Then call it like below.
$('.item').toggleClass('active');
Simple jsfiddle demo of this.
If for some reason you can't alter the mark-up to make a global active class, you may have to call it with all the 'expanded selectors' (but should be no reason for this)
$('.item').toggleClass('active expanded open');
For help on the bookmarklet aspect; this is a cool link that should help you out; but all you should be doing is defining the above in a function and then trigger with a .click() event.
Update! I just sent another pointer via comment section below; but you know you can add a class .active via jQuery to all the toggles that share same class or ID. But you will still have to investigate how the toggles were built on this external website for you to incorporate the expanded state with your new .active state. There is no way for use to know this as you didn't post that code; but it's typically found in the .css pretty easily.
$('td').find('.mt-center').addClass('active');
Related
jQuery Mobile 1.2.0
I generate the HTML using JavaScript ($(selector).html(content)), add it to the DOM and then display it ($.mobile.changePage()).
Then I invoke an AJAX call, get some data, and re-generate the html (but the parent element, the same $(selector), stays the same, I just change its html(...)).
At this poing the HTML is not "enhanced" by jQM, no styling applied on it.
Now according to the docs I should simply call the page() function on the parent element, i.e $(selector).page().
Other places in the docs suggest triggering the create event, i.e $(selector).trigger("create").
The problem is that non of the above two methods works - the styling of jQM is not applied.
Looking at the code of jQM, I've tried triggering the pagecreate event on that element and it does work, but, this is not documented anywhere, so I'm uncertain of it, especially concerning future releases of jQM.
At some poing in the docs I've read that I can call page() on a page only once..
Anyway, is there any concise/standard way to tell jQM to "enhance" the whole element and its child-elements? Or should I simply stay with triggering the pagecreate event?
Thank you!
To recreate a whole page use this:
$(selector).trigger("pagecreate");
This was my answer to a simmilar question: https://stackoverflow.com/a/14011070/1848600. There's an example of page recreation. Take a look, this should probably solve your problem.
What is the scope of
$(selector).trigger("create");
You should be able to add any elements on the 'pagecreate' event which comes right before 'pageshow' jqm styling is applied to elements. For example I dynamically add a header/footer like this
$(document).on('pagecreate', "[data-role=page]", function() {
var header = "<div data-role='header'>some header stuff</div>";
var footer= "<div data-role='footer'>some footer stuff</div>";
$(this).prepend(header);
$(this).append(footer);
$("[data-role=header]").fixedtoolbar({tapToggle: false});
$("[data-role=footer]").fixedtoolbar({tapToggle: false});
});
Make sure you're using jquery 1.7 or above I think that's when the on method was introduced;
It sounds like you may be generating the DOM and then changing the page, try it the other way around go to the page first then dynamically edit the dom.
EDIT
set the reload page option to true
$.mobile.changePage($(page), {reloadPage: true});
Edit 2
$(selector).children().each(function(){
$(this).trigger('create');
})
I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.
You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.
Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});
i want to implement a right side sliding menu similar to the one in amazon.com..
i am trying to use javascript to edit the script on every mouseover/onclick event..
i want to hide/show the table on every event.
function show(a){
var id="myMenu"+a
if (i<-12){
i=i+speed;
document.getElementById(id).style.left=i;
}
}
function hide(a){
var id="myMenu"+a
if (i>-135){
i=i-speed;
document.getElementById(id).style.left=i;
}
}
this should be good to show/hide the tables.. but how to id dynamically add two tables one over another..because the main menu table will always be visible, but the sub menu when hidden will be beneath the main menu..
any method to do the same?
am i in the right path?
Definitely on the right path, this is a good test of concept.
I would suggest you look at jQuery (or other JavaScript libraries like Scriptaculous) specifically at the slideToggle() and toggle() methods.
Don't want to give it all away, but take a look at the Amazon source code, you may get some helpful little tips. :P
I'm currently working on a website for a Danish company. The content is all in one page and I've included some jQuery-scrolling and stuff. Works nice!
For the menu I'm asked to programme the elements so the active element is bold. That I've done too.
The problem comes here:
The client wants a home button and a next and previous button. But when I click them and the page scrolls the CSS-classes do not change for the active element - so the bold element in the menu is still the last clicked page.
I hope that anyone can help.
The page can be seen at:
http://vedelform.dk/new/intro/
In addition to calling the serialscroll plugin, the event handler for the images needs to update the appropriate class name on your navigation link. When you click on a navigation link directly, you call the changeActiveStates function, but that isn't happening with the home, next, and previous buttons.
You should use the onBefore attribute of the serialScroll plugin to define a method that will figure out which navigation link is supposed to receive the class name. It can then call the changeActiveStates function.
It doesn't look like it would take more than a few more lines of code to fix your problem. If you need more help getting it to work, let me know.
edit:
If you add this (starting at line 84 of init.js), you should be in business:
easing: 'swing',
onBefore:function(e, elem, $pane, $items, pos){
if ((pos >= 0)&&(pos < $('ul.navigation > li > a').size())) changeActiveStates($('ul.navigation > li > a').get(pos));
return true;
}
You will then need to call changeActiveStates (probably after you initialize the function) on page load to initialize the correct menu item.
I hope that helps; let me know if it gives you any more trouble.
You used minified version of scripts so it is very hard to debug the code. Also you didnt give us name of plugin you use. I think there is a bug in plugin. Because css class "selected" sould jump from one menu item to another.
#Jason Francis:
You're probably right. I'm not that much into jQuery and Javascript and what I've done so far is more luck than it's knowledge. I did A LOT of trial and error.
I understand what you're saying about getting the serialScroll plugin to figure out what element to call changeActiveStates on - but I seriously don't know how to do that.
I found an anchor plugin for jQuery, and its demo site is at http://www.position-relative.net/creation/anchor/.
I am developing a FAQ page on a website where a list of questions are followed by a list of answers. I could use the scroll effect to move down to the corresponding answer when a user click a question. But I also want the answer is highlighted in some ways or others so that a user can get focused on the answer.
I would like to achieve the effect. Also, if you know any other plugin to do this, please let me know.
As you invoke the anchor plugin using:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
you could also bind your own function that does the highlighting as so:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate().click(function() {
$('.highlight').removeClass('highlight');
$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
});
});
This requires that you have this kind of structure:
Anchor link
...
<a name="foobar"></a>
<div>The content you want to highlight</div>
And in CSS, you just define how you want the highlighted part to look like:
.highlight {
background: #ffc;
}
The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.
You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.
I'd use jquery.scrollTo personally, to highlight it is pretty simple, just use .toggleclass() on the span/div that wraps the answer.