How do I track/troubleshoot a <div> or <class> attribute? - javascript

I'm troubleshooting a scrolling gallery with standard left and right navigation arrows. I'm wondering if there is a way to track when a specific div or class tag is modified upon loading the webpage. My problem is that
<class="next browse right disabled">
is being applied to my right arrow when it should be
<class="next browse right">
It is a heavily modified jquery-tools scrolling gallery that someone else wrote and I'm just not sure how to approach this. Any advice/help is appreciated!

Jquery does not have any baked in event that can help you intercept addition/ removal of a class to div. You can at anytime use jQuery hasClass to see whether a particular class is applied or not.
$('#mySelector').hasClass('right') //returns a boolean
You can take advantage of chrome dev tools breakpoint debugging if you are performing these actions via javascript.
Finally, if you insist on capturing class change, then you must raise your own event. Please see this question:
jQuery - Fire event if CSS class changed

I'm not sure if this works:
$('next.browse.right.disabled').removeClass('disabled');
or
$('next.browse.right').removeAttr('disabled');
Maybe DOM Breakpoints in the Chrome devtools would help?

Related

Different alternatives to jQuery scrollTop?

At the moment, I am learning how to write in javascript and jquery. I am wondering if there are any alternatives that can be used to scroll through (up/down) classes which are in a div (Not the whole body). Thank you in advance for the help.
PS: I tried to use ScrollTop but for some reason (I have no idea why) after refreshing the page on Firefox, IE and Edge the script starts to act really weird. For example, if I press button A to scroll to a class called "A" after the refresh when I press the button A it goes to class "C", for example.
PSS: The alternative method can be in javascript or jquery. Doesn't matter.
Best regards,
George S.
If you want an alternative you can use internal links. For use this HTML feauture you set a name attribute to the content section header where you want to scroll like this:
<a name="aDiv">A Section</a>
and set the href attribute to the ancor link like this:
Go to A Section
This is another approach and must be integrated with CSS for getting the result that you want.

How do i make a menu that's not toggled to be toggled by default

I'm using the theme Pixeladmin (http://wrapbootstrap.com/preview/WB07403R9)
As you might see when you open the page the menu is open now I want it to be closed and I have no clue what to change.
I'd like to have it closed by default instead of open.
I'm graceful for your answers, thank you once again!
You just need this!
$(document).ready(function(){
$('body').addClass('mmc')
});
When I inspected the element and toggle happened body was the only change that took place by adding/removing class to it!! By default this class will not be there which says menu is open and if you add this mmc class to body menu will go to close state with animation!
Update
On more inspection I found out that the event for click is present in pixel-admin.min.js file and below is the code that gets executed on that event.
$("#main-menu-toggle").on("click",$.proxy(this.toggle,this))
I don't have much idea on $.proxy jquery function but below is what documentation says
Takes a function and returns a new one that will always have a
particular context.
Explanation about the functionality of proxy is always welcome!
Source for $.proxy
Now your styles for .mmc class has been defined in pixel-admin.min.css and the minified version of file are always difficult to debug so I am not able to gather much information on that! If you get full version of above files then you can debug yourself to understand in a better way!
One hack would be to simulate a click to the toggle button, when the page loads.
$(function() {
$("#main-menu-toggle").click();
});

How can I figure out the function/programming behind the toggle navigation in the Dashgum Bootstrap Theme?

I'm making a system using the Dashgum Free Bootstrap theme.
I have it locally but I can't find any programming behind the toggle navigation function, and I need to take a look at it. I'd guess javascript but there's no id related to the element, and even when you delete all attributes, as long as you don't delete the div and there's something inside it (like something written ) it still works.
What kind of sorcery is this? I need to see the code behind scenes!
You can check the code by inspecting the navigation element in the link above. I pasted my own here too, but I don't think it helps, does it? I can't share the system I'm making :(
<div class="sidebar-toggle-box col-lg-2 z-padding">
<div class="fa fa-bars tooltips " data-placement="right" data-original-title="Encolher/Expandir Menu"></div>
<b>eCategory</b>
</div>
Thank you very much.
You could try to inspect the element with Google Chrome. Press F12 then click on the magnifier, position on the element. On the side menu you are going to find Event Listeners, it means all events attached to that element.
You might be able to find the function that runs on click this way.
You can also look in the code for code selecting the element (i.e. ".sidebar-toggle-box").

Scroll div with "middle button" mouse instantly

I want to implement navigation in a website using the middle button function of scrolling ("clicking" (please re-read clicking) the middle button and roaming around the borders) but I would like this to happen instantly without the need for user input. Something of the kind:
$(element).mouseover(function(){
roamAround(); //I've tried SIMULATING (NOT <--- DETECTING)
//a middle-click from the mouse but failed
});
I am currently using google-chrome and at this stage of development I am not really concerned about cross-browsing this function. If it should work on chrome then it's fine.
What would be the best way to do this using native functions or emulation? Thank you very much!
EDIT: I don't want to DETECT user input, please re-read the question :)
Sounds like you want, like Deryck said, infinite scrolling. There's a jQuery plugin jScroll that does a simpler version for vertical content that can either be auto-loaded or loaded by a button press. You can view the code on Github to see how to do something similar, i.e. your roamAround function could mimic the _load function found there.

fake/automate a "hover" in JavaScript/jquery?

I want to put this nav bar on my website, here is the demonstration page: http://insicdesigns.com/demo/css3/exp1/index.html
it uses JavaScript, jQuery, and CSS
The problem is, on my site I use PHP and a index.php?page=home, ?index.php?page=contact, etc.
And I can't figure out how to set an item on the bar as "active" [it defaults to "Home"]. I looked into the code, and I found out that the first <li> [the Home] has class="active". I tried simply moving the class to the second item, ["About"] but that just screws everything up, by moving the whole animation to the right which does not work as it is meant to. So on the .click(), this is how it sets an item active:
$(this).siblings('li').removeClass('active'); // removes active
$(this).addClass('active');
So I put id="target" on another item, and with Chrome's JS Console I type in the same code, except I use "#target" instead of "this"
But nothing immediately changes. I have to hover over the bar, for the animation to start, look for the active item, and move the animation over there. Right now, if I use this to replace my current nav bar [which is here], and if someone goes to index.php?page=contact I can't make the About link active so that the user knows they're on the About page!
So here is my question:
Is there a way to tell jQuery I just hovered, from some code? [fool it]
something like:
$("#target").fakeEvent("hover");
So that it runs the code [which, btw, is attached to a function(){} inside a $(selector).hover() -- look at the lavalamp.js file on the example]? If you can help, I'd really appreciate it! Thanks :)
Well, hover consist of two events, mouseenter and mouseleave.
You can trigger the mouseenter event with:
$("#target").mouseenter();
Answer: http://jsfiddle.net/morrison/4CU4H/
Notes on answer:
The fancy menu uses poor JavaScript. I have adapted the script to fix some bugs as well as optimize performance. Use my JavaScript instead of theirs.
To get the active class in the correct position on page-load, simply apply the active class where you would like before jQuery is called. You should probably set the active class in your php output. This also allows for nice style degradation when JavaScript won't load.
The plug-in disables clicking because it's an example. You'll probably want to remove the return statement in the click function.
Notes on your website:
Hide your queries. This isn't a hard rule, but in your case you should. http://www.macdonaldfamilysingers.com/?page=contactindex.php?page=contact should be http://www.macdonaldfamilysingers.com/contact/. Here's a tutorial on url rewriting.
You'll probably want to beautify your tables. By removing some of the borders and spacing, it'll also take up less visual space.

Categories