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
  • 418 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Jollyyy100

Dani AI

Generated

Short answer: put both page fragments into the same HTML document, keep the login panel in the DOM but hidden, and use one well-ordered set of scripts so the two UI pieces don’t stomp on each other. The behavior you described (one widget works only when a particular jQuery include is removed) is a classic “two jQuerys on the page” problem — the second load overwrites the first and erases plugin registrations. (stackoverflow.com)

Practical checklist to merge cleanly

  1. Pick one jQuery version that both widgets will run on.
  2. Load that jQuery once (early with defer or in the head) and then load every plugin/script that depends on it. Script order matters: dependencies before dependents. Initialize both widgets inside a DOM-ready or deferred script so the DOM exists when you wire them up. (html.spec.whatwg.org)

Example (schematic)

<script src="path/to/jquery.min.js" defer></script>
<script src="path/to/plugin-A.js" defer></script>
<script src="path/to/plugin-B.js" defer></script>

<script defer>
jQuery(function($){
  // initialize A and B here
});
</script>

If a plugin truly requires a different jQuery version
Use jQuery.noConflict() only as a last resort (it lets you keep two jQuery instances under different names), but it’s fragile because many plugins expect the global jQuery/$. Where possible upgrade the plugin or use the jQuery Migrate helper so old APIs keep working while you update code. (api.jquery.com)

Z-index / dropdown clipping (why the slide might hide behind the animated grid)
Animated grids, transforms, opacity or positioned parents create stacking contexts that can clip overlays. If the login panel is inside a container with overflow:hidden or a transformed ancestor it can be hidden; render popups outside that container (append to body) or adjust stacking/positioning so the popup sits above the grid. Inspect the page with DevTools to find the offending ancestor and z-index. (developer.mozilla.org)

Notes tied to the thread: and were right about “hidden-then-shown” behavior and avoiding multiple includes; ’s advice about loading scripts after jQuery and initializing late is the right workflow. Use the browser console and network panel to find errors and verify script load order.

Recommended Answers

All 13 Replies

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:

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.