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.
Related
I would like to use the following CSS slider in my project
http://jsfiddle.net/63w9jnqq/1/
It does not using any JavaScript or jQuery. When I clicking on the link from any slide other than the 'slide 5' takes me back to the first 'slide 5' instead of opening a new tab. It is CSS heavy code, I have no idea about how to fix it. I have no problem to use extra jQuery or JavaScript to fix this issue.
I tried the following jQuery to stop click action, it does not working
$(document).ready(function(){
$(".slide-gfx a").click(function(event){
event.preventDefault();
});
});
:focus state
The cause of this issue is down to the fact that the slideshow is relying on the :focus handling of CSS to remember state. This is a very temporary handler, which is lost whenever a new element is focused. I built the slideshow more for non-interactive elements, just to demo visual work — this works fine with :focus
The slideshow reverts back to slide 5 (or the end slide) when none of the slides are focused. This was fine for my needs, but obviously not for your use-case. This is occurring when you focus on your <a href="" /> elements.
Limitations of css
Unfortunately there is no way to match (in current CSS) up to a parent from a focused child — at least not that I am aware of. This would solve the issue with pure CSS. You can obviously match downwards (i.e. parent:focus .child), but that doesn't help. You can employ the The checkbox/radio hack which I did consider at the time, or you can switch to using a different way of "remembering state".
:target state
The CSS in the original demo was already tailored to also support :target as an alternative, so you can patch current functionality with a small bit of JS. I wouldn't want to rely on this across older browsers however — but then again, older browsers would probably find it hard to cope with this system anyway.
Snippet and fiddle
This patch listens for the :focus event, and sets the fragment in the URL to match the id of the slide. This means that the CSS then switches to listening to the :target selectors instead, which should keep the right slide selected.
http://jsfiddle.net/63w9jnqq/4/
$('.slide').on('focus',function(e){
window.location.hash = $(this).attr('id');
});
Recommendation
Going forward, I'd suggest perhaps looking at more recent methods for implementing CSS. As I'm sure there are a lot of new improvements that could be used to extend the system — something I haven't had time for of late. There may even be handling to integrate touch-style events to make things more naturally mobile friendly, although perhaps that is just wishful thinking.
At the end of the day, even though there is a lot of CSS in this solution, it is best to try and understand every part of the code you use in your projects — as that helps to debug situations you might find yourself in. This issue is mentioned in the original post here, and the solution using :target is employed to handle the "sub nav" links:
Implement a CSS-only slideshow / carousel with next and previous buttons?
I have a feeling what ever gave me problems that I tried to find a solution in this question - Can't trigger a jquery function with scroll on a particular div - might be responsible for scroll related issues here.
Short version: Can't get this, or anything similar, to work
$("#Container3").scrollTop(0);
Nothing happens really, no error in the console, no wierd behaviour, just seems to ignore the scrollTop(0) request.
Long version: I'm sorry but posting a code snippet isn't feasible as it's a complex app-like interface but I'll try to explain the issue to the best of my abilities:
Mobile responsive website that loads different interfaces depending on screen real-estate.
Smallest interface composed of 3 parts - navigation at the top, search at the bottom and content in the middle.
Content is mostly loaded during use and not at page load.
At the push of a button that re-loads the contents of a particular div I also need to scroll that div to the top for usability purposes.
While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.
The load is done outside the viewport so animations aren't needed but I'll take them as long as they get this to work.
This is what my jquery request looks like
$(document).on("click",".NavRowButton",function(event){
$("#Container3").scrollTop(0);
var $targetButtonId=$(event.target).attr("id");
$("#Content").load("/load/login/"+$targetButtonId+".php");
$("#DisplayContentName").html("<span class='NavColSpan'>"+$targetButtonId+"</span>");
$("#Container3").find(".WindowBorder").css("top","0");
});
#Container3 has the scroll bar and is the immediate parent of #Content.
This is a function I'm still building and is the solution for the problem I had before and also what I'm using now to help debugging this one:
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
var $currentScroll=$(event.target).scrollTop();
console.log($currentScroll);
var $targetId=$(event.target).attr("id");
console.log($targetId);
}
},true);
Thanks in advance.
Edit: I just noticed that if I put a $(event.target).scrollTop(0); at the end of the scroll distance debugging function it actually resets the scroll so it seems that as long as the div is the event.target it works while from the outside as during the click function I might not selecting it appropriately.
Edit2: I just learned I can cache event.targets into variables and with a .get() inside the click function I'm sure I'm selecting the right element so it just leaves how the scrollTop(0) method works.
They now look like this(also had to add a condition to limit load events):
global variable:
$DivTestVar="";
click:
$(document).on("click",".NavRowButton",function(event){
var $targetButtonId=event.target.id;
if($targetButtonId != $("#DisplayContentName").html()){
$($DivTestVar).scrollTop(0);
console.log($($DivTestVar).get());
$("#Content").load("/load/login/"+$targetButtonId+".php");
$("#DisplayContentName").html($targetButtonId);
$("#Container3").find(".WindowBorder").css("top","0");
};
});
scroll debugging:
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
$DivTestVar=event.target;
var $currentScroll=$($DivTestVar).scrollTop();
console.log($currentScroll);
var $targetId=event.target.id;
console.log($targetId);
}
},true);
If I click before scrolling the console.log($($DivTestVar).get()); returns empty but if at the first scroll it starts returning the correct DOM element. The scrollTop(0) is ignored anyway.
Edit3: I just want to leave a small update. I have since given up on the method I was trying to use here for something with a similar effect but not as user friendly as what I was trying to achieve. As such I no longer care about this personally but if you're reading this and have a similar problem I have come across this issue a couple more times to a smaller effect and I now think it's related to position:fixed; elements and how scrollTop() deals with that but I don't have the time to delve into it more so good luck and godspeed.
Did you try the pure JS version ?
document.getElementById('Container').scrollTop = 0
You have two possibilities, as far as I know.
1-Scroll the whole page until it reached the top of your #Content div position with jQuery.
2-Your #Content is inside a div with scroll, which scrollTop(0) will work for that (example: http://jsfiddle.net/zkp07abu/).
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?
The following zip contains the website html and required files: http://dl.getdropbox.com/u/4281191/login.zip
When you hover the html (html:hover) you see a animation that transforms the container into a loginbox, I want that to happen when I click on "Login" at the "Hello, Guest" menu instead.
Anyway to get this done? I'm new to js...
Additional info:
the css is inside the html,
and the css3 animation gets triggered by:
html:hover id/class {
property: value;
}
Thanks for any help!
And I can't vote at comments since I don't have enough reputation...but I could do some free design work for the person who helps me ^^
I still don't know much about animations, but for what matters here, you could use something like the .classname:active or .classname:focus selectors. But as soon as you click something inside it (e.g. a text box), the style will disappear.
So, for this, it really depends. Do you just want a menu that has links that take the user to another page (for this case, you'll be fine) or do you want a login form (for this case, forget it, use jquery)?
For today and future reference, save this link because it'll be your best friend:
http://www.w3.org/TR/selectors/#selectors
Update
Yes, I hovered but I didn't look at the code. I looked now and, unfortunately, the answer is no. You can't affect some upper level object like that using CSS.
For that use jQuery. The simpler way would be use jQuery to add a class to the element you want to change (like $("#the-object-id").addClass('class-name')). To keep the effect add the duration argument. Read this page about Adding a class using jQuery.
That's my issue in its simplest terms. Let me try to clear it up.
I have a div, in this case called "testdiv", which has a class name of "menulink" attached to it. There is a link inside of the div. When I roll over the link, I want the div class to change to "menulinkHover". When I roll out of the div, however, I want the class to revert back to "menulink". To do this, I am using getElementByID. Rolling over the link works perfectly, but as soon as I roll out of the link, not the div, the class reverts back.
Here is a fiddle with what I have so far: http://jsfiddle.net/nathanbunn/KJMsf/
I'm working on this with jQuery, using .removeClass and .addClass in the same manner, but I fear I will get the same issue. I've missed something, I know I've missed something, but what is it? For an idea of what I'm looking for, have a look on the Harvey Nichols homepage. I know they use Prototype for their framework of choice.
Can this be done with the script I have? Am I right and I have indeed missed something? Can it work better in jQuery? Can it be done in pure CSS, even? Please help. I'm at a complete loss.
Combine CSS with jquery mouse event and fadein/out, and you should get what you want. An example is : here
I set it up to use JQuery as I always find it better than pure javascript. I got it to work by setting the link to have a mouseenter that adds a class to the div and then the div itself has a mouseleave that removes the class. It now works fine for me. Here's the link:
http://jsfiddle.net/KJMsf/6/