Member Avatar for Jollyyy100

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.

  • 6 Contributors
  • 13 Replies
  • 405 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Jollyyy100
Member Avatar for zobadof

Hello,

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

Member Avatar for Jollyyy100

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 for Jollyyy100

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 for JorgeM

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 for Jollyyy100

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 for JorgeM

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 for Jollyyy100

Ok, let me try

Member Avatar for BMXDad

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 for JorgeM

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 for oakwood

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 for Jollyyy100

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 for Jollyyy100

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.