1,105,320 Community Members

2 different HTML Pages

Member Avatar
Jollyyy100
Junior Poster in Training
92 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I coded 2 different webpages so that its easy for me to understand. Basically both the pages data should be on one page. I was wondering how can i merge both the pages to be one, without messing the design. What im trying to achieve is to run my first html page, and after i add the second page codes onto the first one, instead of the design messing up, i want it to come over the first page, i hope your getting this.

For example: my first webpage is full of sliding images, and my second webpage is a link for logging in, whereby when hovered a slide pops down. So how can i make it possible, that my sliding images dont get diturbed and the slide pops down with ease.

Need help, im trying to google but i cant seem to find a solution. Any suggestions, please give feedback. Thankyou.

Member Avatar
zobadof
Posting Whiz in Training
220 posts since Dec 2009
Reputation Points: -7 [?]
Q&As Helped to Solve: 8 [?]
Skill Endorsements: 0 [?]
 
0
 

Hello,

Do you have this on a live site, or the code avaliable?

Member Avatar
Jollyyy100
Junior Poster in Training
92 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Nopes, its just something im doing to understand how people work on it, but i cant get a way to help myself out.

Member Avatar
Jollyyy100
Junior Poster in Training
92 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I can give u a real life e.g. remember the old twitter login link on the top right of the page? The page overall had data, than when u click on the link, the username and password input form would slide down.

So generally i have my data on one page and the other page has the sliding down, but how should i merge them without it messing my design?

Member Avatar
pixelsoul
Posting Shark
920 posts since Feb 2011
Reputation Points: 174 [?]
Q&As Helped to Solve: 147 [?]
Skill Endorsements: 25 [?]
 
0
 

It might have seemed like two pages maybe, but the form to login is actually always there, It is just hidden from view. Twitter uses javascript to show the login form when you clicked on the login link.

Check out this tutorial
http://www.ericbieller.com/2012/01/05/jquery-tutorial-making-a-login-popupdropdown-box-fade-in-with-only-jquery-and-css/

Member Avatar
JorgeM
IT Addict
6,413 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

It sounds like you want to show/hide content on your page. To have the type of dynamic interaction that you are describing, you'll need to incorporate JavaScript into your design. Once you learn JavaScript, using a library such as jQuery will make JavaScript coding a whole lot easier.

Member Avatar
Jollyyy100
Junior Poster in Training
92 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I achieved that but with an error, basically for my sliding animated images i've used this script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.gridrotator.js"></script>
        <script type="text/javascript">  

and the script for my hide/show tab is:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/loginregslide.v1.3.js"></script>

So when i remove this line from the sliding animated images script:

src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Im able to show and hide my tab, but again my images which i animated to change in every 2 seconds doesnt anymore..

What should be done?

Member Avatar
JorgeM
IT Addict
6,413 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

For one, you only need to reference the jquery library once. Based on your description, you are adding it in multiple times and also using different versions. Pick a version of jQuery that will support all of your jQuery code.

Since you have multiple scripts on the page, I would recommend that you link the jQuery library in your head section prior to the closing </head> tag.

Member Avatar
Jollyyy100
Junior Poster in Training
92 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Ok, let me try

Member Avatar
ggamble
Junior Poster
151 posts since Mar 2006
Reputation Points: 1 [?]
Q&As Helped to Solve: 17 [?]
Skill Endorsements: 4 [?]
 
0
 

Make sure your calling you JavaScript after referencing your jQuery. If you simply cut and pasted the code then any JavaScript calls from the top section should be moved to the bottom of the page, under the jQuery reference calls.

Member Avatar
JorgeM
IT Addict
6,413 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

If you simply cut and pasted the code then any JavaScript calls from the top section should be moved to the bottom of the page, under the jQuery reference calls

In addition to help clarify... I'd suggest the jQuery reference in the head section, and you can place your javascript code at the bottom just before the closing </body> tag.

Member Avatar
oakwood
Newbie Poster
4 posts since Mar 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Yah tht's right,jQuary reference must be follow head (h)section,and u can place ur javascript code just before </body> and front <body>

you can also check this section for more help

Member Avatar
Jollyyy100
Junior Poster in Training
92 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I tried what all of you suggested, but i cant use one specific javasrcipt on my page. If i do, one or the other element stops responding. Ok this is what i actually need, see this page i want this to be there as the background of my website: http://tympanus.net/Development/AnimatedResponsiveImageGrid/index3.html
and after that i need this to show up on the corner of it, see the "contact" tab slide out:
http://www.building58.com/examples/tabSlideOut.html

i can do similar things in vb n xcode, but when i try doing it on a web platform it gives me problems. Can anyone suggest what should be done.

Member Avatar
Jollyyy100
Junior Poster in Training
92 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Made a new thread for this called '2 different scripts - Java, Jquery, Script'. As no one was replying to this article.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: