[Pro] jQuery/javascript

I have two different instances of javascript on my page.
One runs a SlideOut Tab on the right, the other runs a Sound Cloud module on the footer called Stratus Bar. They don’t seem to want to run together. There are two different versions of java/jquery in the that run these which I suspect is the issue. Not sure what to do. Is there a version that can run both?

Thanks.

http://smartytest.com/Wren/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Actually there is more to it than that.

The wow slider is using one version of jQuery 1.7.2 while slide out is using 1.11.2

Remove the reference for the latest version of jQuery that you added for the slide out function.

The slide out should work fine with the earlier version that you are using for WOW but this may not be the root cause of your problem.

It may be that the soundcloud javascript is incompatible with jQuery.

You need to do a process of elimination. Try the page in turn without WOW, slide out and soundcloud and see which one breaks the page. But first try it without the line that calls jQuery for the slide out.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Dave, I’ll give that a try.

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Your problem may actually be incompatibility with Lightbox v2.05 which is Protaculous based whereas from version 2.5 on it uses jQuery.

So try the page without using Lightbox and see if it works then.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The lightbox that is in the Web Yep folder?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So yes. It now works.
The Stratus bar (Sound Cloud) needs to be first in the before the slide out and the slideOut jquery is not needed.
The Sound Cloud ref runs both.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So I set up a Facebook image inside my SlideOut Tab and I’m trying to figure out how to set a link to it.

Here is what I have so far:

Content

Here you can find all the information you need about Volunteering at the Mary Rigg Neighborhood Community Center. Hover over the main entrance to enter the Community Center. You will be guided through the center using arrows. Check out different volunteer opportunities in each room. Roam the halls as if you were really there!

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m trying to figure out how to set a link to it.

To it or from it?

Do you want a link on the image to somewhere or do you want to link to the image within the slide out?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have revised my example to show a link on the image

http://www.deltadesign.co/slide-out/

However the link is actually a block level link on a div with the image set as a background.

The slide-out plug in does not allow you to add this directly as in

<a href="your-link-here">
<div id="slide-out-div2" class="slide-out-div">
    <a class="handle2" href="http://link-for-non-js-users">Content</a>
    <p>
    <a href=""><img src="http://smartytest.com/Wren/Resources/facebook.png" width="64" height="64" alt=""></a>
    Here you can find all the information you need about Volunteering at the Mary Rigg Neighborhood Community Center. 
    Hover over the main entrance to enter the Community Center. You will be guided through the center using arrows.
    Check out different volunteer opportunities in each room. Roam the halls as if you were really there!
    </p>
</div>
</a>

Instead I had to create a new div within the parent, apply the bg image to that and then wrap the link around it.

<div class="slide-out-div">
    <a class="handle" href="http://link-for-non-js-users">Content</a>
   <a href="your-link-here"><div class="full-size"></div></a>
</div>

And add some extra CSS to ensure the inside div was the same size as the parent

.full-size {
background-image: url(Light-Travels-Cover.jpg);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}

Note the background image is applied through the style ‘full-size’

Hopefully that is what you are looking for.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you for all of that. So I got the block link idea. What I’m after is to set up a linked(from) div inside the main div, and the ability to still have a background image in the main div.

You can see in this example I have the slideOut with a red background and a Facebook image inside. I now need to apply a link to the Facebook image that will take the visitor to Facebook.

http://www.smartytest.com/Wren/slide-test.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I now need to apply a link to the Facebook image that will take the visitor to Facebook.

The only difference between what you have already is that you have not set an href attribute.

Your code is

<a href=""><img src="http://smartytest.com/Wren/Resources/facebook.png" width="64" height="64" alt=""></a>

And what you need to add is the actual link ie

<a href="http://yoursite.com/the-link-page.html"><img src="http://smartytest.com/Wren/Resources/facebook.png" width="64" height="64" alt=""></a>

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m Trying to tighten up the space in between my three graphic links on my SlideOut Tab.

Can you take a look at this for me?

http://www.smartytest.com/Wren

Content


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You could jut take out all the P stuff to leave

<div id="slide-out-div" class="slide-out-div">
    <a class="handle" href="http://link-for-non-js-users">Content</a><br>
    <a href="https://itunes.apple.com/us/album/light-travels/id893682888?ign-mpt=uo%3D4/" target="_blank"><img src="http://smartytest.com/Wren/Resources/iTunes-link-tab.png" alt=""></a><br>
    <a href="http://www.cdbaby.com/cd/wrenmarieharrington/" target="_blank"><img src="http://smartytest.com/Wren/Resources/cd-baby-link-tab.png" alt=""></a><br>
    <a href="http://www.amazon.com/Light-Travels-Wren-Marie-Harrington/dp/B00LBDE4B6/ref=sr_1_2?s=music&ie=UTF8&qid=1424278422&sr=1-2&keywords=light+travels/" target="_blank"><img src="http://smartytest.com/Wren/Resources/amazon-link-tab.png" alt=""></a>
</div>

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I thought I tried that. I’ll try again.

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options