Develop Reference

JS rule to affect 2 separate links on hover

I've spent the past several hours trying to work out a hover effect for 2 separate links on a site I'm working on. The links aren't even remotely related in the HTML, so I'm unable to use CSS (as far as I can see) to achieve the effect. It's nothing more than a simple hover effect to change the color of two separate links on hove, regardless of which one the user hovers over. There are no images at this point, only text - I'm hoping it stays that way (I'm looking at you, graphic designer wife).
The html involves a bootstrap navbar & a link on the home page of a WordPress site, so the architecture is something like this:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="abt" href="#">About</a></li>
<li><a class="prc" href="#">Work</a></li>
<li><a class="exp" href="#">Testimonials</a></li>
<li><a class="ofc" href="#">Locations</a></li>
<li><a class="con" href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<section id="content" role="main">
<article id="post-10" class="post-10 page type-page status-publish hentry">
<header class="header">
<h1 class="entry-title">Home</h1> <a class="post-edit-link" href="#post.php?post=10&action=edit">Edit This</a></header>
<section class="entry-content">
<div class="links">
<li><a class="abt" href="#/about/"><span class="pg abt1">
<p>About</p>
<p></span></a></li>
I'd like to focus on the "About" sections for this - I'm pretty sure that I need either jQuery or JS to accomplish what I'm after but I'm a rank beginner in both!

Alright, so you're right. You need jQuery. First of all, what you should do is give the two link tags the same class, let's say foo. Give both link tags the class foo. Then, use jQuery to target them both.
Now, id you want it to change the color permanently on hover, use THIS:
$('.foo').hover(function(){
$('.foo').css('color', 'red');
});
Feel free to change red to whatever color you like. Now, if you want the color to change only while being hovered over, use this:
$('.foo').mouseenter(function(){
$('.foo').css('color', 'red');
});
$('.foo').mouseleave(function(){
$('.foo').css('color', 'black');
});
in the second chunk, change black to whatever the original color is. If you are unfamiliar with how to use JQuery, add the following tag into your code below the CSS stylesheet (if applicable)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
This makes the browser read the jQuery. If you don't have this, the browser can't read the jQuery.
Then, copy and paste either one of the two bits of jQuery into a file, save it as a .js file, and then attach it via <script> tag after the tag listed above. Alternatively, put the jQuery between two script tags as such:
<script type='text/javascript'>
//one of the two blocks of JQuery here
</script>
Put that in your code After the tag that allows you to use jQuery.
EDIT: I received a request for code to make them different colors. The code would look like this:
First of all, you can keep or remove the class. Then assign them separate IDs , say id_1 and id_2. Then, using the first method:
$('#id_1').hover(function(){
$(this).css('color', 'red');
});
$('#id_2').hover(function(){
$(this).css('color', 'red');
});
This would change the color permanent when hovered on. Using the second method to change the color while being hovered on:
$('#id_1').mouseenter(function(){
$(this).css('color', 'red');
});
$('#id_1').mouseleave(function(){
$(this).css('color', 'black');
});
then do the same thing, but switch id_1 for id_2 and change the colors to whatever. The first color is the color being changed to, and the second one the color being set back to the original.

Javascript: image onclick then slide big image

I really like this slider sample HERE!. But I want to do is assign next/previous onclick command on images display on right side like this:
Instead of clicking those DOTS. I want to assign the onclick EVENT on images(RED BOXES).
How can I tweak that one.
Thank you in advance!

I've simply changed the $navDots variable to point to the images on line 90 of js.
var navDots = $('.nav-images');
this.$navDots = navDots.children( 'img' );
Then use this HTML:
<div class="nav-images">
<img src="http://lorempixel.com/400/200/city" alt="img01" width="100px"/>
<img src="http://lorempixel.com/400/200/business" alt="img02" width="100px"/>
<img src="http://lorempixel.com/400/200/technics" alt="img03" width="100px"/>
<img src="http://lorempixel.com/400/200/people" alt="img04" width="100px"/>
<img src="http://lorempixel.com/400/200/nature" alt="img05" width="100px"/>
<img src="http://lorempixel.com/400/200/sports" width="100px"/>
</div>
Hope it helps! Please see codepen example as well!. http://codepen.io/anon/pen/corjw

Disclaimer
Please do link to the non-minified source of the plugin, so you can modify that file directly. Currently, the plugin handles all the elements inside the #cbp-fwslider area. It may not be advisable to hack from outside, which is what this solution is...
Solution
It looks like you can mimic this by hiding the dots (which is what the plugin uses by default) and using your two elements to trigger click events on the dots. The currently active dot is indicated by a cbp-fwcurrent, so something like $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent') would select the current dot. Use jQuery's next() and prev() calls check if the relevant dot exists, and then do a $el.trigger('click').
Code Outline (untested)
$('#fwdButton').click(function() {
var $dot = $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent'),
$nextDot = $dot.next();
if ($nextDot) {
$nextDot.trigger('click');
}
});
`

Difficulty with selective show/hide based on CSS class

I'm working on a js script which will show / hide multiple divs based on css class, seemingly pretty simple. I set out to find an example of this and found something close in the article linked below. I used the code in the following link as a starting point.
Show/hide multiple divs using JavaScript
In my modified code (shown below) I am able to hide all (which is errant) and show all (which works correctly. I'm not sure why its not targeting the CSS class "red, green or blue" correctly. If I hard one of the class names in the script it works as expected, so I'm fairly certain I'm having an issue in the way I'm referencing the css targets themselves.
I am able to hide all and show all, yet I'm having difficulty showing only the selected class.
Here is the jsFiddle I'm working with: http://jsfiddle.net/juicycreative/WHpXz/4/
My code is below.
JavaScript
$('.categories li a').click(function () {
$('.marker').hide();
$((this).attr('target')).show();
});
$('#cat-show').click(function () {
$('.marker').show();
});
HTML
<ul class="categories">
<li id="cat-show" class="cat-col1" target="all" >All</li>
<li id="cat-models" class="cat-col1" target="red" >Model Homes</li>
<li id="cat-schools" class="cat-col1" target="blue">Schools</li>
<li id="cat-hospital" class="cat-col1" target="green" >Hospitals</li>
</ul>
<div id="locator">
<div id="overview-00" class="marker models" title="Maracay Homes<br />at Artesian Ranch"></div>
<!--SCHOOLS-->
<div id="overview-01" class="marker red" title="Perry High School">1</div>
<div id="overview-02" class="marker red" title="Payne Jr. High School">2</div>
<div id="overview-03" class="marker blue" title="Hamilton Prep">3</div>
<div id="overview-04" class="marker blue" title="Ryan Elementary">4</div>
<div id="overview-05" class="marker green" title="Chandler Traditional – Freedom">5</div>
</div>
Thanks in advance for any responses.

$((this).attr('target')).show();
This is syntactically incorrect. It should be $($(this).attr('target'))
However that's no good either because this is the anchor element that does not have the target. Use $(this).closest('li').attr('target') (or add the target to the <a>).
This is also semantically incorrect as that would interpolate to $("red") which would try to look for a <red> element.
$("." + $(this).closest('li').attr('target'))
http://jsfiddle.net/WHpXz/5/

You are almost there. This is the line that needs tweaking: $((this).attr('target')).show();
$(this) actually refers to the current anchor tag that was clicked. Since the anchor tag doesn't have the target attribute, you need to go up to the parent.
From there, you can get the target and add the '.' to the color to use as a selector.
var catToShow = $(this).parent().attr('target');
$('.' + catToShow).show();
I've edited your fiddle. Give it a shot.
http://jsfiddle.net/juicycreative/WHpXz/4/

jQuery hover show div toggle

I'm working on this pretty easy site but it's been a while since I fiddled with jQuery and I think I'm doing something wrong here.
Here you can preview the idea with jsFiddle http://jsfiddle.net/rGb34/1/
There are a few problems with the jQuery.
If you hover over the yellow button the yellow content starts toggling.
If you hover over a button and then back off it the div disapears (due to the toggle function) but I would like to have the last div active even when there's no hover.
Does anyone have a good tip for me so I can finish this?

First of all: Don't use same id name with another tag. In your example it was id="slider" .
Here is jsFiddle to play with (I have edited your html and css too)
You can do that with this way, much more solid:
jQuery:
jQuery(document).ready(function() {
$('.greenC, .blueC, .orangeC').hide();
$('.nav li').hover(function() {
var takeClass = $(this).attr('class');
// takes class hovered element. example: '.yellow'
$('.slider').hide();
$('.'+ takeClass + 'C').show();// shows the element '.yellowC'
});
});​
And your html should be like this:
<div class="yellowC slider">...</div>
<div class="greenC slider">...</div>
<div class="blueC slider">...</div>
<div class="orangeC slider">...</div>
<div class="wrap">
<ul class="nav">
<li class="yellow">Fiducairy services</li>
<li class="green">Licensing</li>
<li class="blue">Payment processing</li>
<li class="orange">E-zone colocation</li>
</ul>
</div>​

$('.green, .blue, .orange, .yellow').hide(); if you hide yellow also, it works fine for me..is this what you want?

If you want the first div to show up properly on load, you have to be more specific on your .yellow event handler
$('.y_active, .yellow').hover(
function() {
$('.yellow').show();
$('.green').hide();
$('.blue').hide();
$('.orange').hide();
}, function() {
$('.yellow').hide();
});
DEMO

Javascript show/hide: How to set to Show

I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?

Change the display:none to display:block on your elaborate_1 div.

Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.

Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});