Load content into div only on click with additional - javascript

Ok Im trying to do a few different things but they are all pretty simple. I can only find answers that somewhat give a piece of what Im trying to do and when I mix and match different answers they don't work well together. I figured it would be better to ask specifically.
The hidden divs on the bottom are filled with images so I only want them to load when a link is clicked and not when the page is loaded. Each hidden div will have three divs of its own that target the three top divs so when you click the link for that hidden div all three of the divs in that hidden div load into the three top divs. I'm pretty sure I know how to make one link trigger different events so you don't have to help me there unless you know a simpler way to do this. Here are the main things I need help with:
loading div content only on click and not page load
targeting a div to load other div content into
when link is clicked to open a new hidden div, the other hidden div that was showing goes away
and because this is a tech website it would be nice to have some kind of tech-y transition when switching between/loading new divs. If nothing else a fade would work but you don't have to help me with this part, just if you happen to know a code or webpage with different transition effects for loading content that would be nice.
I don't really have any pre written code yet that will conflict with whatever you suggest so you can suggest anything. You don't have to write everything out, I can catch on with an example. Maybe.
Thank you I know there are separate individual answers but again I have had trouble trying to get them to work together or they will do part of what I need but not the other. I thought if I just asked instead someone could whip up a code for me in like 5 minutes. Thanks.
edit: Ill add code but I don't think it'll help much.
<div id="menu"> <a> -Cyber glasses Link- that opens cyberglasses div and loads it into presentation div </a></div>
<div id="presentation">
<div id="div-pic-1">Empty space to load stuff into</div>
<div id="center-content">Empty space to load stuff into</div>
<div id="div-pic-2">Empty space to load stuff into</div>
</div>
<div id="cyberglasses">(this div does not appear on pageload and only loads on click of the menu link named "Cyber glasses Link" at top of page)
<div id="cg1"> picture 1 of cyber glasses to load into id div-pic-1 </div>
<div id="cgcontent"> description of cyber glasses to load into id center-content</div>
<div id="cg2"> picture 2 of cyber glasses to load into id div-pic-2<div>
</div>
The menu link at the top named -Cyber glasses Link- loads div cg1 into div-pic-1
and div cgcontent into center-content
and div cg2 into div-pic-2
all at the same time. But the only div that loads on page load is the presentation div and menu div not the cyberglasses div. Cyberglasses div only loads on click of the cyber glasses link.

<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="navigation">
Welcome
Frog
Lamma
</div>
<div id="content"></div>
<div id="image"></div>
<script>
$(function(){
$('#navigation').on('click','a',function(e){
e.preventDefault();
$($(this).attr('rel')).load($(this).attr('href'));
});
});
</script>
</body>
</head>
</html>
Demo: https://oteck.co.uk/sample/load.html

Related

How to load html pages with slides

I have three pages on my website. index.html, services.html and company.html. What I need is when a user clicks on services link, then the page will load from the left or right side instead of the load as normal. I don't know perfectly but it may be possible with some Jquery elements like data-transition="left", data-transition="base", data-name="services". Is there any plugin to load pages from left or right. I need this, Please help me.
There is no way to "load" the page from left to right, but what you can do is:
On your services page
create a "wrapper div" around your page content, and
off-set the content inside the wrapper div to beyond the far right of the page, then
use jQuery/javascript on page load (i.e. inside the $(document).ready() function to animate the content back to normal position.
So, something like this (untested):
<body>
<div id="wrapper">
<div id="inner-wrap">
//page content goes here
//Actually, I might create an inner div here and off-set/animate that one...
</div>
</div>
</body>
CSS:
#inner-wrap{position:relative;margin-left:100vw;}
jQuery:
$(document).ready(function(
//use jQuery .animate() method to slide the marginLeft param back to 0.
){});
Note that jQuery's animate method does not use margin-left - rather, it uses marginLeft. Like that.
Example:
Animating marginLeft with jQuery
 
Update:
You can use the same idea that was suggested above, but you only need a single file (e.g. index.html) for the entire website, and the "pages" are all just DIVs, and you can use jQuery/javascript to "change pages".
For example:
<body>
<div id="wrapper">
<div id="page1" class="pagex">
//page ONE content goes here
</div><!-- .pagex -->
<div id="page2" class="pagex">
//page TWO content goes here
</div><!-- .pagex -->
<div id="page3" class="pagex">
//page THREE content goes here
</div><!-- .pagex -->
</div>
</body>
CSS:
#wrapper{position:relative;}
.pagex{position:absolute;top:0;left:100vw;}
Concepts you need to understand:
a) z-index -- allows you to position one div on top of another
b) position:absolute -- removes the div from the HTML flow and allows you to position it anywhere on the screen, even over-top of other divs

HTML + jquery - menu to change contents in the content DIV

I've been digging around on how to do it, but didn't find any solution which would fulfill my needs.
Got a basic layout of my page with menu on the left, separate div for header and a div in the middle where all the content should be displayed when one of the menu buttons is selected.
I'd like to change the content only of the "content" div dynamically without reloading the page when one of the menu buttons is pressed.
I've managed to do it as per below with jquery:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#nav ul li a').click(function(){
$('#main').load('contents.html #' + $(this).attr('href'));
return false;
});
});
The menu :
<nav id="nav">
<ul class="menu">
<li class="menu1"></li>
<li class="menu2"></li>
<li class="menu3"></li>
<li class="menu4"></li>
<li class="menu5"></li>
</ul>
</div>
</nav>
contents.html file sample:
<div id="menu1">
<h2>Menu1</h2>
<p>Menu1 page contents</p>
</div>
So when menu1 button is pressed I'm able to change the content of main div to reflect the relevant data - this works.
My questions are:
1) is this the correct way on how to do it ? If not what would you recommend ?
2)I want to display more advanced stuff not only text (e.g What if I want to have another jquery in the div-id="menu1" ? I've tried it and it didn't work.)
P.S - I'm just a beginner so maybe I've missed something basic - but couldn't fix it by myself.
Thanks in advance!
Peter
I think there are a number of ways to achieve what you want. It depends on the nature of the content you want to load.
If there isn't masses of it, you could load it all onto the page on page load within different div's and then just show and hide the relevant div when clicking the menu items. (have a look at twitter bootstrap for some implementations, things like tabbed browsing).
If you do just have text, you could use ajax to load in the data from an external file w3schools.com.
Alternatively as mentioned in a comment above, you could create a single page application using something like angular.js, knockout.js etc.
Hope that helps.

How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?

So, I run my church's website and I try to stay pretty basic in the coding, but we have seasonal pages that we add and remove from the website all the time so I get tired of changing the "simple" HTML code on every page for the nav bar. I have found where I can use PHP and have one code, like but is it possible to have the current page highlighted, i.e. on our website now, the current page name is bold and a different color.
I have also seen JS do this (Highlighting current page in the nav) but I don't really understand how to implement this, so if you think this could be the better route for me, and can help explain how to do it, that would be cool.
Any help would be great!
add an id attribute to the body tag of each of your pages, like this:
<body id="home"> <!-- this would be for your home page for example -->
...
<body id="about"> <!-- this would be for your about page... -->
add the same to the li tags of your nav, like this:
<li id="home">Home</li>
<li id="about">About</li>
then in the CSS file just do this:
body#home li#home, body#about li#about { // style of the active menu item }

How do I use JQuery in coordination with an anchor tag to move the screen to a location?

I've never worked with this before so I am not sure if I apologize if I am using too many words to define what I am looking for.
I want to create a navigation menu in the header where upon clicking a link the screen should slowly move down to that section of the page.
Code structure:
<div class="header">
About
Contact
</div>
<div class="container">
Some content
</div>
<div class="section2">
About
</div>
<div class="section3">
Contact
</div>
So if a user clicked on About how do I use JQuery to slowly drag them to that section and the same for contact?
Just add id's on your div with the section name:
<div id='about' class="section2">
About
</div>
Then use this code:
$('.link').click(function(){
$('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}) //Will maybe be $(window) instead of html,body.
return false;
})
Fiddle : http://jsfiddle.net/Hw4L6/
you could use jquery scrollTo.js script for smooth scrolling
or
you could just link to the section you want to scroll by just providing the id of the section in the href tag,like >>
About
I have also used scrollTo.js in a small website I have written 2 years ago, here is the link ->
http://students.iitmandi.ac.in/~boga_saikiran/
there, when you click the Contact Me button on the top right or Top button on the bottom right you can see a smooth scrolling effect.
The code related to it is >>
(assuming you have jquery js file is included in your head tags)
1) download the scrollTo.js file and place it in your directory where your html file is
2) include this in the head tag
<script type='text/javascript' src='scrollTo.js'></script>
3) Place these in your javascript script tags inside the head tags
$(document).ready(function()
{
$('#link_id').click(function(e)
{
$.scrollTo('#about','slow');
e.preventDefault();
});
});

add images from popup to parent page

I written a simple image editor PHP script, users can add images from galleries to editor area and merge all finally.
now my problem is:
galleries open as popup and editor area is parent page, i need a javascript or jquery code when a user clicked on a item in popup page, image added to parent page in specific div.
here is destination div code:
<div id="objects">
<div class="obj_item"><img id="obj_1" class="ui-widget-content" src="elements/1.png" /></div>
<div class="obj_item"><img id="obj_2" class="ui-widget-content" src="elements/2.png" /></div>
</div>
please help me,
thanks
You can target the parent using window.opener
$('#objects', window.opener).append('image code');

Categories