Search jQuery

jQuery Forum

Screen name:
lindsayanng
About Me:
Completely green when it comes to javascript but I am a fast learner. I know enough to get my in trouble with HTML, CSS, and php.. now tackling javascript.

lindsayanng's Profile

9 Posts

31 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Another step in making my large slider
[2Replies]
- 23-Apr-2011 11:15 PM
- Forum: Using jQuery
Ok, I posted before and got some good direction to move in but again I am stuck.

I have an image slider that is made up of images from the wordpress gallery function (i am SOO much better at PHP than javascript). I have the output of the gallery to be like this:
1. <div>
2. <ul>
3. <li>image</li>
4. <li>image</li>
5. <li>image</li>
6. <li>image</li>
7. </ul>
8. </div>
The div is supposed to work as a window where the overflow is hidden but I have it set to be 100% of the browser width. The goal is to slide through the images where the "next" image is centered on my screen.

I am using the jquery serialScroll and scrollTo (which is for the most part, AWESOME) but I am having some issues with getting it to calculate the distance so that no matter what the size of the image (portrait or landscape) it always lands in the center;

Here is my test page:
http://bscdeveloper.com/photo/#

Here is the website that I am emulating
http://www.justinhackworth.com/#imagegalleries/Weddings/Weddings/29

noobie trying to acheive slider w/ transparent overflow
[4Replies]
- 21-Apr-2011 10:53 AM
- Forum: Using jQuery Plugins
I am thinking that you guys here can definitely help me out because I know I had seen a plugin like this in my previous searches but now I can not find it.

The ultimate goal is to get a large image slider that works like this Photographer's Website

Logically I feel it should be easy using a basic slider that has images in a row with a div that has overflow:hidden. My concept is to make the overflow:visible and put a div over the top of everything with a transparent white BG.

The issue is that I am having a hard time either making a window in the center OR bringing the centered image to the top of the z-index stack

I have experience with tweaking jquery / javascript but am not at the level of writing my own yet.. some direction would be GREATLY appreciated!

Newbie to javascript, trying to learn..
[5Replies]
- 20-Mar-2011 03:24 PM
- Forum: Using jQuery
I have been reading a lot about javascript and jquery and I have, in the past, successfully implimented plugins by copying, pasting, and then edited the prebuilt examples.. I am trying to learn a little more.

I know the effect that I want, and have an idea of the logic behind it but I dont know enough of the syntax and the language to really get it. I have a little box of divs contained in "navBlock" div and the goal is to the change the color of all of the text inside of the "navBlock" div except for the one that you mouseover. Essentially the effect I am going for is to fade the text that is not hovered over so that the hovered element appears highlighted.

Here is the structure.
1. <div id="navBlock"><div id="photog">PHOTOGRAPHY</div><div id="websites">WEB-<br>
  SITES</div>
  <div id="branding">BRANDING</div><div id="lowerBox"><div id="marketing">MARKETING</div><div id="message">Serving as creative directors, freelance designers, or entire creative department for companies and individuals. We are a reliable & professional design and marketing firm. </div>
  </div>
You can see this code live here with the styles.

here is a screen shot of what I hope it will look like when hovering over a piece of text. I have been able to do simple things like change the styles of the element that I am hovering over and the entire content of the navBlock container, but I can't seem to change the style of everything except the one being hovered.

SimpleTip tool tip is not calculating the tool tip location properly
[0Replies]
- 28-Jun-2010 02:19 PM
- Forum: Using jQuery Plugins
I installed this tool tip plugin:
http://craigsworks.com/projects/simpletip

It was super simple to install and customize and I am more than happy with it, except for one little thing.

The position of the tool tip is not calculating properly. I attempted to see if was based on the position element in the CSS of the containing div, but I changed all of them around to see if it would make a difference and it did not fix the problem.

Changing the containing div to position:relative the tool tip actually moves, but it still does not appear in the proper place above the link.

If you go to this example page:
http://bscdeveloper.com/mockups/version2/example.html

the pop up selector is the text under the "Details" table with the darker background. When you click on that text, the tooltip pops up, but about 350pixels away from the text.

Also, the other issue is that I need to get it to display on hover instead of on click (which is something i might be able to figure it out with some more reading, btu any help is appreciated)

I am pretty good with HTML and CSS but the javascripting is where i get lost.

I have a feeling it's a combination of css being finicky and me not understanding the javascript.

Thanks your help

opening a tab using an image link instead of the actual tab

[10Replies]

11-Jan-2010 09:43 PM
Forum: Using jQuery

Please forgive me, as I am pretty new at Javascript, but I need to learn

Anyways, i use the Jquery UI Tabs plugin for navigation within a page on my website. I have two tabs on this page and I would like to have one image at the bottom of the first tab content that just simply opens the second tabbed content.

I read this wiki on the documentation section of the plugin page:

..select a tab from a text link instead of clicking a tab itself

var $tabs = $('#example').tabs(); // first tab selected $('#my-text-link').click(function() { // bind click event to link $tabs.tabs('select', 2); // switch to third tab return false; });

This had me pretty confused.

This is the code that I have for the image (it also uses a simple javascript image hover effect on it as well)

 
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('consultation','','../weddings/pagegraphics/consult_b.png',1)"><span><img src="../weddings/pagegraphics/consult_a.gif" alt="set up a consultation now" name="consultation" width="293" height="36" border="0" id="consultation" align="right" /></span></a>

So when I read the the above wiki, i assumed that you put it in head like this:

     $(function()
            {
            /*    $('#tab-me').tabs();  */
                $('#tabmain').tabs(4, { fxFade: true, fxAutoHeight: true});
                $('.scroll-paneMap').jScrollPane();                
var $tabs = $('#tab1').tabs(); // first tab selected
$('#consultation').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

Where i used the id of the image as the first "blind click event to link" and the name of the first tab that is opened when you view the page as "tab1" and the name/id of the tab that I would like to open on click is tab2

this is my basic code setup:

 <div id="tab1" class="tabContent">
          <div class="scroll-paneContact">
MAIN CONTENT GOES HERE
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('consultation','','../weddings/pagegraphics/consult_b.png',1)"><span><img src="../weddings/pagegraphics/consult_a.gif" alt="set up a consultation now" name="consultation" width="293" height="36" border="0" id="consultation" align="right" /></span></a>
</div><div>
<div id="tab2" class="tabContent">
            <div class="scroll-paneContact" >
FORM TO LINK TO FROM TAB1 GOES HERE
</div></div>

So as you can see, I am pretty stuck. I'm sure i did something entirely wrong and misunderstood the instructions in the wiki doc. ANY help at all is GREATLY appreciated.

Is the Tiny Scrolling plugin going to effect other anchors?
[0Replies]
- 15-Aug-2009 02:47 PM
- Forum: Using jQuery
I have the Tiny Scrolling plugin and its very nessecary to the design of my website.. but I also want to add another plugin that allows for animated tabs./ From what I understand, BOTH add an effect to the anchor links.. is it a really bad idea to have both plugins on one site?? is there a way to change it so they dont both try and add the same effects to the wrong links???

please, i am very new at javascript, but not with html, css, and php.. So i so understand the basics, but i dont know ALL of teh javascript lingo just yet.. so be patient

Jquery Gallery and Navigation suggestions please
[3Replies]
- 13-Aug-2009 12:36 PM
- Forum: Using jQuery
Hi there. I am trying to find a good solid layout for my website that used JQuery. Right now I have a basic horizonatally scrolling website with 6 divs that are 2000px wide. The issue with the horizontal website is that you can only have some many "pages" (divs) because certain browsers can only go so wide.. So on certain pages I would like to have a type of tabbed browsing, where you click and it changed the content inside of the smaller div, but it remains on the same "page"

I can easily do this using CSS or a basic Javascript, but I would like to try and find something with a little but more "flair" and was hoping one of your jquery experts could point me in the right direction as to where to find a good plugin.. the plugin directory is SO overwhelming with miscategorized plugins and plugins that just plain do not work.. So i am hoping for some first hand knowledge here.

Here is a link to a website that has the effect that I would like to have (i know this site is using mootools, but i want to stick with jquery)

http://www.razorfish.com

Tiny Scrolling plugin and image maps help
[1Reply]
- 07-Aug-2009 07:21 AM
- Forum: Using jQuery
So i am working on my horizontal website layout, and I am pretty happy with my concept and design, but it seems that there is one issue with the smooth scrolling plugins..

I am using [url="http://lab.centralscrutinizer.it/the-tiny-scrollings/"]THIS PLUGIN[/url] here called Tiny Scrolling

and I was able to get it to work using an image as the link and the
<a href="#first">
coding.. you can see it working by clicking on the floating navigation you see on the example page.

My issue is that I wanted to use an image map to create a link for the first page.. So i created the map and linked the same way but instead of using
<a href>
i used
<area map>
which basically disables the smooth scrolling.. it also does something weird where when you land on that other page, you are already scrolled a little bit down so you are not at the complete top of the time

So i am sure that the reason this is happening is because this plugin relies on the anchor (<a href) to complete the effect.. and since i am not very good with javascript, i can not figure out how to change it

Here is a link to my example site:
[url="http://design.bscphoto.com/"]CLICK HERE[/url]

Here is the javascript I am using for it:
http://bscphoto.com/design/js/thw.js

and and ALL help is GREATLY appreciated.. i wish i knew more about javascript, but I am learning.. i am pretty decent with coding in general, so if you tell me to do something I can PROBABLY figure it out..

[SOLVED!] JQuery Galleriffic help..
[21Replies]
- 27-Mar-2009 04:49 PM
- Forum: Using jQuery
I am hoping to GOD that this is the holy grail of jquery help, because i have been asking this question all over and no answers. I REALLY hope you guys can help me!

So i installed gallerific on this page here:
http://bscphoto.com/galleriffic-ben.html

and here is the path to the jquery script
http://bscphoto.com/js/jquery.gallerific.js

So the ONLY thing i really need, and i HOPE its not asking too much.. is I need to be able to cut off the thumbnails at 5 rows (10 thumbs total)

and I need to move the thumbnails over to the right and have the large image pop up on the left.

If you guys can HELP me with this, iwould LOVE IT. Seriously, i'm not asking anyone to do the work for me, i just need to know where to look, because i just CAN NOT find it!

I work with HTML, PHP, and databases (and CSS) but i do NOT knowjavascript that well yet

I will bow to your feet for EVER

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend

..select a tab from a text link instead of clicking a tab itself