I have divided my page into 2 halves. Now I have few links in my left sidebar.I want to call the content of the links on my right sidebar without loading my page again.
<div class="container">
<div class="row">
<div class="col-md-2 sidebarleft">
<br>
<ul class="nav nav-stacked">
<li>BookMarks</li>
<li>Cards</li>
<li>Desk Organiser</li>
</ul>
</div>
<div class="col-md-10 sidebarright">
<div class="div2">
</div>
<div class="div3">
</div>
</div>
</div>
I think what you want to look into is Ajax. This can be achieved in multiple ways, but one of the most common methods is with Ajax in Jquery.
Jquery has a nice wrapper function load, this should do everything that you need.
$("a").click(function(e) {
$(".div2").load($(this).attr("href"));
e.preventDefault();
});
You're going to have to use either Frames, IFrames, or AJAX.
Frames - Not in HTML5 so not a good option.
IFrame - Forward Compatible but clunky.
AJAX - Probably your best bet but not for the faint of heart.
Related
I have a piece of markup where when a user clicks on "find a rider" the browser is supposed to take the user down to where the participants are on the same page. But when clicking the link it just takes me to a page not found on chrome, edge, and firefox (can't test safari).
<div class="container-fluid blue">
<div class="container text-center">
<h1 class="white">Prairie Women on Snowmobiles</h1>
Find a Rider
<div class="row">
<div class="col-lg-12" style="margin-bottom: 15px;">
<div class="hero elevation-z12" style="background-image: url('../images/content/pagebuilder/PWOS_banner.jpg');"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Prairie Women on Snowmobiles</h2>
<p>A non-profit organization whose annual missions are provincial awareness events that are designed to focus attention on breast cancer and the recreation of snowmobiling as well as raise the much-needed funds for breast cancer research. Over the past 18 years we have raised almost $2.5 million for the cause. To learn more about Prairie Women on Snowmobiles click here.</p>
</div>
</div>
<div class="container">
<div class="text-center">
<h2>Riders</h2>
<p>Meet our 2020 Riders</p>
</div>
<div class="events">
<div class="event-display" id="find">
[[S51:PWOS_SK_reus_riders]]
</div>
</div>
</div>
</div>
normally to fix this I would just put the url in the link "../site/SPageServer/?pagename=PWOS_SK_homepage#find" and that works, however, doing that will break my url tracking if people land on the page using the vanity url.
Here's a link to the page:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage
any help is appreciated.
thanks,
Your page starts with <base href="https://secure2.convio.net/cco/site/" /> so when you click on href="#find" it resolves to https://secure2.convio.net/cco/site/#find.
You need to write your URL relative to the base URL, not the current page.
As mentioned in a comment, it would be better to do this with simple JS instead of playing with browser functionality. Without touching the HTML and assuming you have jQuery on the site, I would add something like the following in a script tag (obviously below both the <a href='#find'> and div#find)
jQuery("a[href='#find']").click(function() {
event.preventDefault();
jQuery("body, html").animate({
scrollTop: jQuery("#find").offset().top
});
})
This allows you to stay on the page without linking away/messing up tracking data while the window will scroll to the proper element no matter how far down. Hope this helps (even though you managed it before me ;) )
When you hover the mouse over the link you see:
https://secure2.convio.net/cco/site/#find
but you expect:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage#find
This is caused by the tag in the header.
I have two divs that act as links (<a>). One in one paragraph, the other in the second paragraph. The second link works: on mouseover (in Chrome) the bottom left of the window displays the link address. The top one does not do the same. What is wrong? I'm talking about the links in the paragraph tags, not the menu links.
<body ontouchstart>
<div class="header">
<div class="logo">Q<sup>3</sup></div>
<div class="desc">Quito's Qustom Qode</div>
</div>
<div class="row">
<div class="sidenav col2">
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
</div>
</div><!-- /row -->
<div class="row">
<div id="content" class="col10">
<div class="info">
<div class="about">
<div class="profile-back">
<div class="profile"></div>
</div>
<div class="about-me">
<p>Kevin (Quito [Key'-tow]) Williams is an aspiring front-end web designer. He has 5 years of experience in HTML, 4 years experience in CSS, and is currently studying jQuery. As a modern web designer, he is using his coding background to study the latest web technologies: HTML5, CSS3, RWD. In addition to his web technology languages, he is also familiar with: C<sup>++</sup>, Javascript, Java, Perl, Lua (Minecraft based), LISP, SQL. </p>
<p>Hello</p>
You've forgotten to add the actual link on your anchor tags through href.
Your current code:
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
Changes:
about
pricing
projects
legal
Can you be a bit more clear about what outcome you are expecting?
Edit: I think i understand now, "About" "Pricing" "Projects" should be hyperlinks?
you are missing the "href" attribute in the tags which should fix your problem.
If you don't want the link to direct to a different page, you can use href="#" to stop this.
Are you on about the following lines?
RWD.
<p>Hello</p>
If so, both are working fine in chrome and IE for me. I'm not sure what the issue is for you.
try this code,add target="_blank" in your a href
<p>Hello</p>
And the working fiddle link is here https://jsfiddle.net/p7mnsj3p/
I have a template that gets all of the information generated from an external program. I am attempting to make this template a bit more modern and less 1992.
The page used to work with a table. It didn't look very nice so I am attempting to remove the table and just have everything on the screen fluid.
For the containers of the text I have used the bootstrap well class. The problem is that if one well is a bit longer then the other, it looks very odd. I need both of the <div class="well"> to be the height if the tallest one.
I have tried to do this with a lot of different CSS. I really don't want to have to go back to a table.
The code is below.
<div class="col-md-12">
<div class="col-md-6">
<div class="well">
<h3>Heading</h3>
Info
<br>
<br>
</div>
</div>
<div class="col-md-6">
<div class="well">
<h3>Heading</h3>
Info
<br>
<br>
</div>
</div>
</div>
Any help is appreciated.
so what you want is that the div's height must equal to the div that has a lot of data...
try using jquery.
var maxHeight = Math.max.apply(null, $(".well").map(function ()
{
return $(this).outerHeight();
}).get());
$('.well').height(maxHeight);
check this out:
https://jsfiddle.net/x3ehq57g/2/
it seems to be simple , our designer made the a design of 3 different forms in one like page
as you may see in this snippet
I don't think we can do this design with valid html in twitter bootstrap grids ?
where you would get the form opening and closing tags and keep it valid
<div class="container">
<div class="col-md-4">
<div class="row"><div class="form1">form1</div></div>
<div class="row"><div class="form2">form2</div></div>
<div class="row"><div class="form3">form3 </div></div>
</div>
<div class="col-md-4">
<div class="row"><div class="form3">continue of form3 </div></div>
</div>
<div class="col-md-4">
<div class="row">
<div class="form3">
continue of form3
</div>
</div>
</div>
</div><!-- /.container -->
You cannot split a form element so that one part is inside one element and another part is inside another element. HTML syntax prevents that.
You can, however, have input elements and other controls outside a form element and associate them functionally with it using form attributes. Browser support is still too limited to make this a feasible option in normal situations.
I have a problem with my page:
http://dennisadelmann.de/New/index.html
when my index page is loading, the Name (header) is jumping.
i think its because of the simpleweather plugin. but i couldnt find a solution
Here are the code of my header: (let me know if you need more of the code)
<div id="fadeMenu">
<ul class="navscroll">
<li>work</li>
<li>journal</li>
<li>contact</li>
</ul>
</div>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<header>
<nav>
work
journal
contact
</nav>
<div id="weather"></div>
<div id="name">
<h1>DENNIS ADELMANN</h1>
<p>communication design</p>
</div>
</header>
Thank you!!!!
You're right, it seems like it's because of the weather plugin.
To fix it you need to either make height:fixed where the weather appears (so changing the content doesn't matter)
OR
You could add some default content to the area when it's made that is later changed once the plugin is ran, something like a fallback inside the element tags: "The weather plugin is blocked. Please allow third party plugins on your browser."