Currently I have a position: fixed TOC in my side bar that the user can click on to jump to a different (a name="(1, 2, ,3 ,etc)") on the page. This adds a class of "currentlyReading" to the selected li.. When the user clicks another li in the TOC, it of course removes the class and adds the class to the li the user selected.
What I have been trying to add is this: when the user scrolls past the next (or previous) (a name="", I want the TOC to update with the current chapter the user is reading. That means, I need to remove the class of "currentlyReading" and assign that class to the li that is currently being read.
Any tips on how to accomplish this?
I Like waypoints for this. Here is a resource http://imakewebthings.com/waypoints/
To use waypoint, you would include it in your app, then call it in your js.
In head
<script src="js/waypoints.min.js" type="text/javascript"></script>
In your js
$('.currentlyReading').waypoint(function(event, direction) {
//do your trickery here e.g.
//$(this).toggleClass('currentlyReading');
//$(this).next().toggleClass('currentlyReading');
//event.stopPropagation();
});
I found a stack example here for that also How to make jQuery waypoints plugin fire when an element is in view and not scrolled past?
Related
I've created a widget in Webflow that works but the UX design isn't the greatest and in order for me to create a better experience I need help with some js. Here's a little overview of the widget so you see what I mean:
The goal of the widget is to allow users to
a) browse our product categories and continue to view product options
b) view the aesthetic differences between our offered building types (prefab and container) while also allowing the user to compare building types for each category by following the "compare" CTA
Gif of Widget
We have 5 product categories in 2 different building types: prefab and container. I have 2 tabs to switch between the building types and then inside of those tabs content, I have 5 category tabs: Living space, portable offices, utility, recreation, and storage. Those tabs' contents are the image and CTAs on the left.
My problem is the user's selected product category doesn't mirror over to the other building type. For example if you've selected office spaces on the prefab tab and switch over to the container tab, a completely different product category will be selected.
How it Should work
I was able to mirror the selected prefab product category over to the container tab using this basic logic:
<script>
//prefab
$(document).ready(function() {
$('.livingprefab').click(function() {
$(this).addClass('current');
$('.livingcontainer').trigger('tap');
});
$('.storageprefab').click(function() {
$(this).addClass('current');
$('.storagecontainer').trigger('tap');
});
$('.utilityprefab').click(function() {
$(this).addClass('current');
$('.utilitycontainer').trigger('tap');
});
$('.officeprefab').click(function() {
$(this).addClass('current');
$('.officecontainer').trigger('tap');
});
$('.recprefab').click(function() {
$(this).addClass('current');
$('.reccontainer').trigger('tap');
});
});
</script>
Now, this works but when I try to add the opposite (selected products on the container tab mirror to the prefab side) everything breaks. Why is this? How can I fix it?
P.S. This is literally my second time touching js so the code is probably far from best practice. I'm a UX designer trying to branch out into development so if you have any advice I'd love to read it.
Edit: Here's my Webflow read-only link
Your code above makes an automatic click/tap occur on a container product just after a click occurs on the corresponding prefab product using the trigger method.
If you replicate this code in reverse as you suggest, an automatic click/tap will also occur on a prefab product just after a click on the corresponding container product. So— together these would create a never-ending recursive loop of clicks and I would imagine that everything would break.
Instead of a click on one product triggering an automatic click/tap on the corresponding product, I suggest you use the click/tap events on a pair of products only to make changes directly to the classes on the relevant elements. I would avoid triggering additional click/tap events and in doing so you will avoid such recursive problems. And, as it looks like you are toggling the same class on the pair of corresponding products, you can apply the same function to both to avoid duplicating code.
It's hard to be precise without seeing the rest of your code and the HTML, but something like:
function makeLivingCurrent() {
$('.livingprefab').addClass('current');
$('.livingcurrent').addClass('current');
}
$('.livingprefab, .livingcurrent').click( makeLivingCurrent )
And so on.
I am working with the skrollr plugin.
I have a set of arrows. One points down and the other up. When you click the down arrow it takes you to the next section/chapter of the animation. Right now it works great. But my issues is lets say the user does the following:
He/she scrolls half way through the page(lets say section 5). They then decided to see how much of the animation is left. So they click the next section arrow.
This user will be put to section 2 even though they are at section 5 because I have no way to detect when the user hits each section so I can update the arrow #hrefAnchor.
What I was thinking is adding an interval/ event listener that would detect when the section is visible on the DOM and update the arrows to take you to the previous and next sections.
Does anyone know how I can approach this idea?... and will work in ie >= 9
If you're willing to modify the Skrollr library, something I had done was add:
else if(prop === 'javascript') {
eval(val);
}
as an option in skrollr.setStyle which allows then for you to add a hook for arbitrary JavaScript code on elements like each section here using data-XXX="javascript:myFunction();" and I believe Skrollr will even still interpolate numbers in your arguments for you.
If you have control of what gets executed when "next" is clicked, can you check the scroll value at that time to determine which section it is between and switch on that to send them to the appropriate section? Essentially, rather than trying to keep the target current at all times which is wasteful/difficult/error prone, just calculate it when it matters - when the click occurs.
If you give your element a class like "visible", you could select all the visible elements by using jQuery:
$(".element.visible:last-of-type").on("click", function() {
});
I need a jQuery dropdown that stays open after a submenu-item was clicked and the user is forwarded to the subpage.
I'm toggling my dropdown with this code and I guess I need to add a class to the ul.submenu and toggle the visibility of this with CSS?
http://jsfiddle.net/erL8Lc0s/9/
$(function () {
// Dropdown toggle
$('.dropdown-toggle a').click(function () {
$(this).next('.sub-menu').toggle();
});
$(document).click(function (e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle a') && !$(target).parents().is('.dropdown-toggle a')) {
$('.sub-menu').hide();
}
});
});
Unfortunately I'm a jQuery-noob and I can't get my head around this problem
There are a few ways to achieve this, however it's unlikely you'll get a straight-forward answer here, and here's why:
What you're trying to do is show an element, depending on what page the user is currently viewing. There are a few ways to achieve this, but which one depends on the specific circumstances of the problem. Here are a few ways:
You've stated you're using WordPress. Great, WordPress makes the page ID visible, so within your theme you could easily add an override class to the element (such as class="show") depending on the page ID. However, this means you'll have to keep a list of page IDs up-to-date.
Moving on from the above, you could use PHP to grab the current URI, and show the correct element based on that.
Just use WordPress's default menus. You can amend the markup with a navigation crawler. It looks like you're using Bootstrap, so there's a premade one available. Now WordPress will automagically add active classes to the nav elements if you're on that page. You can then use CSS to keep those elements open.
my question is simple. What i want to do is click on a hyperlink (item2 as diagram below), and my page will automatically scroll into (item2 content at the right side). Usually what we do is we set an id to the section, and put <#id> on the hyperlink it will have the scrolling feature. How about if the right hand side content is created as listviewitem?
something like this: http://html5up.net/prologue
On click of item2, set the focus to Item2 from listview.
Actually the question is not cleared.So it may help you..like Put the listview items in a panel.And add a style to panel.. overflow:scroll;
In css you can also apply this.
I am working on a new site TheDigitalScale and I am using jQuery to create a feature list that expands a div when clicked and closes the div with another click.
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function()
{
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
</script>
<div class="msg_list">
<p class="msg_head">They Forgot The Buttons</p>
<div class="msg_body"><p>
Just kidding. The MXT has nifty touchscreen controls so you never have to worry about buttons getting dirty or broken.
</p></div>
</div>
It works fine and all but, I also have a product review link that uses the JavaScript do_PostBack function to expand a review panel.
Review and Rate this item
When the review link is clicked, it causes all of the jQuery divs to expand.
When I set enablepartialrendering to false and it "fixes" the problem but when the review link is clicked it takes the user to the top of the page and expands the review panel rather than just expanding the review panel and keeping the user in the right spot.
I hope I explained this well enough; I am very new to jQuery, JavaScript and AJAX.
Regards,
Shala
EDIT:
I suppose I didn't really ask a question so...
What can I change to make the review link expand the review panel and keep the user in the area without also expanding every one of the jQuery divs?
Here is a link to a product page: MBSC-55
It looks like you have nested updatepanels. Try setting the UpdateMode property of the parent panel to Conditional to prevent the child updatepanel from triggering the parent updatepanel.
Okay, I think I see what's happening. When your page loads you execute this code:
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
Now, when .net does the postback it is re-creating those .msg_body and .msg_head elements. The best solution would be to get .net to not replace those (unless you need them to).
If you need those to re-draw, you can do 2 things. First, set .msg_body to be hidden in your css, that way they are hidden by default. Then to handle the click issue, replace your click code with this:
$(".msg_head").live("click", function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
This will cause the click handler to still work for newly added .msg_head items.