Trying to get content from other pages to load into specific Div from url on click . But for some reason it will not work.
The link keeps forwarding to the page instead of opening in the div. On top of that the initial load code works. It loads the initial content. after setting an alarm to notify my when I click the link with the desired content it sends the alert. Then I put return false; at the end and now it doesn't load anything. What am I doing wrong. Im using the code that I used a year ago on here. but now its not working on my new website. Please help me determine how to fix this.
Here is my AJAX code:
$(document).ready(function () {
$('#main').load('pages/home.php');
$('ul#navMenu li a').click(function() {
var page = $(this).attr('href');
$('main').load('pages/' + page + '.php');
return false;
});
});
Here is my HTML:
<body class="">
<div class="container">
<div class="menu-wrap">
<nav class="menu">
<div class="link-list">
<center>
<ul id="navMenu">
<li><span>HOME</span></li>
<li><span>TALENT</span></li>
<li><span>SERVICES</span></li>
<li><span>MUSIC</span></li>
<li><span>BEATS</span></li>
<li><span>VIDEOS</span></li>
<li><span>CONTACT US</span></li>
</ul>
</center>
</div>
</nav>
</div>
<button class="menu-button" id="open-button"><img src="img/menubutt.png" height="42" width="42"><span>Open Menu</span></button>
<div class="content-wrap">
<div id="main">
</div>
</div><!-- /content-wrap -->
</div><!-- /container -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax.js"></script>
<script src="js/classie.js"></script>
<script src="js/main.js"></script>
And, here's the website testing on my server:
https://trillumonopoly.com/testing
Looks like I found the real reason of your error.
Take a look at your link <li><span>HOME</span></li>
To be more precise, at home.php
In your JS you get full link, e.g. pages/home.php, then you add to it .php one more time, so your final link is pages/home.php.php, but not pages/home.php
Try to change
$('main').load('pages/' + page + '.php');
to
$('#main').load('pages/' + page + '.php');
You have forgotten the # at start of main
Try correcting your url on page variable and also your main typo:
$(document).ready(function () {
$('#main').load('pages/home.php');
$('ul#navMenu li a').click(function() {
var page = $(this).attr('href');//your href attribute is '#', which doesn't yield a correct path
$('#main').load('pages/' + page + '.php');//$('#main') instead of $('main'), for id
return false;
});
});
Related
From a web analyst perspective on any given website i am looking find out which same page anchors are clicked the most by console logging the anchor's text value (inner html text) in the console for now.
The approach i took was to take the current page url after every anchor click and check to see if their had been any hash changes at the end of the url string and if so print that anchor's text value in the console.
var anchor = $("a[href^=\\#]");
anchor.on("click", function(){
if("onhashchange" in window) {
var anchorText = this.text;
console.log(anchorText);
}
});
I'm having issues with the code I wrote because its returning the inner Html text for any anchors on the page(except the ones with external links) but I only want to track the ones that lead to a section on the same page.
Would the approach i took need to be revised to even begin with ?
Here is some of the html I am working with and different anchors I want to track and ones I don't.
<!-- Where the click on the anchor i want to target happens -->
<nav>
<h2 class="wb-inv">Promotions</h2>
<ul class="toc lst-spcd col-md-12">
<li class="col-md-4">
Anchor for section 1
</li>
</nav>
<!-- below is the section of the same page the anchors would point to -->
<div class="col-md-12 pull-left">
<h2 id="story1">Section 1 Title </h2>
<p>Random paragraph 1</p>
</div>
<!-- The html I'm working with contains a set of tabs that reveal information as you click them, the href attribute and the id are both in the anchor. This is an example of anchors I wouldn't want to track-->
<a tabindex="-1" id="details-panel1-lnk" role="tab" aria-selected="false" aria-controls="details-panel1" href="#details-panel1">
<h2 class="h5 mrgn-tp-sm mrgn-bttm-sm">Online</h2>
</a>
Anchors that navigates to element on page is logged.
$(document).ready(function() {
var anchor = $("a[href^=\\#]");
var url = $(window);
anchor.on("click", function(e){
if ( $('#' + $(this).text()).length ) {
console.log($(this).text());
}
});
})
.section {
height: 400px;
}
.section:nth-child(even) {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="one">
one
</div>
<div class="section" id="two">
two
</div>
<div class="section" id="three">
three
</div>
<div class="section" id="four">
four
</div>
var anchor = $("a[href^=\\#]").not("a[href=#shr-pg0]");
anchor.on("click", function(){
var anchorText = this.text;
$(window).one("hashchange",function() {
console.log(anchorText);
});
});
This question is a follow-up to this question:
How do I link to a heading and cause a click event to fire when the link is clicked in JavaScript?
Basically I am trying to link from the footer on any page (the footer is the same across all pages) and do two things: move to the appropriate location on the page and display a previously hidden (display: none;) paragraph (p).
Here is the issue:
In the link above there aren't any solutions provided that allow for the situation where you are NOT on the services page (the page where the discussed links go). In other words, if you are not on the Services page and you click on a link to the services page the js is called and every happens the way it is suppose to except the paragraph isn't expanded. If I click on one of the service footer links while on the services page everything works fine.
How do I get the p to be display: block; when I am not on the services page (the page where I am linking too)?
I tried window.location, but that didn't seem to work. I also tried some solutions I found online for delaying the js until the page loads, but those didn't work either.
Thanks in advance.
ps - I'd like to see if there is a javascript solution, so no jquery please.
markup:
<div id="service1" class="service">
<h2 class="page services" ><img class="img-bullet-services" src="websiteDot.png" alt="alt">service1</h2>
<p class="p-on-white service-desc p-hide" >
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
</br>
<div id="service2" class="service">
<h2 class="page services"><img class="img-bullet-services" src="websiteDot.png" alt="alt">service2</h2>
<p class="p-on-white service-desc p-hide" >
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
<div id="col4-footer" class="four-cols-footer four-cols">
<ul>
<li style="list-style: none;"><h3><a class="a-bold" href="Services.php">Services</a></h3></li>
<li>service1</li>
<li>service2</li>
</ul>
</div>
js:
var target, sericeDiv, pToDisplay
function toggle(link) {
target = link.getAttribute("data-toggle");
sericeDiv = document.getElementById(target)
pToDisplay = sericeDiv.getElementsByTagName('p')[0]
document.getElementById(target).className = "service-desc";
pToDisplay.className = "p-on-white service-desc"
}
css:
.p-hide{
display: none;
}
I didn't understood completly the question but you could set the href as# set a data-attribute, something like a data-href="your/location.html" and create a method and set it onclick=yourProcess() and when you need to redirect get the data-atribute if you want to delay something you could use setTimeout()
You should take a look for data-attrib ,timing events
I hope this helps...
See my comments below, but this solved it for me. I can click on the footer links that go to the services page whether I am on the services page or not.
Major credit goes to MikeVelazco. Without his comments I couldn't have gotten this far.
markup:
<div id="service1" class="service">
<h2 class="page services" ><img class="img-bullet-services" src="websiteDot.png" alt="alt">Financial Analysis, Enterprise Performance, &
Reporting</h2>
<p class="p-on-white service-desc p-hide" id="p-service1" >
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
</br>
<div id="service2" class="service">
<h2 class="page services"><img class="img-bullet-services" src="websiteDot.png" alt="alt">Software, Systems, & Office Automation
Solutions</h2>
<p class="p-on-white service-desc p-hide" id="p-service2" >
xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
<div id="col4-footer" class="four-cols-footer four-cols">
<ul>
<li style="list-style: none;"><h3><a class="a-bold" href="Services.php">Services</a></h3></li>
<li>Financial Analysis & Reporting</li>
</ul>
</div>
js:
// link from footer link to p in services that needs to be displayed when you are on the services page already
function toggle(link) {
var target, sericeDiv, pToDisplay;
target = link.getAttribute("data-toggle");
sericeDiv = document.getElementById(target)
pToDisplay = sericeDiv.getElementsByTagName('p')[0]
document.getElementById(target).className = "service-desc";
pToDisplay.className = "p-on-white service-desc"
}
//when a footer link is clicked that goes to a service on the service page
//this makes the p below the heading display
function openP(){
var theURL = document.URL;
var gotArray = theURL.split("#");
var pToDisplay = document.getElementById("p-" + gotArray[1]);
pToDisplay.className = "p-on-white service-desc";
}
window.onload = openP();
css:
.p-hide{
display: none;
}
Im currently creating a site which has a div like below:
<div class="container">
<div class="one-third column">
<a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a>
</div>
<div class="one-third column">
<a id="tab2" href="inc/tab2.html"><h2>tab2</h2></a>
</div>
<div class="one-third column">
<a id="tab3" href="inc/tab3.html"><h2>tab3</h2></a>
</div>
</div>
<div class="container" style="margin:100px 0;">
<div id="information">
</div>
</div>
Then i would like the content from the external page (which is basically just a div with a little bit of content in it) to be loaded into the div with id="information"
I tried using this but it just sends me to an external page?
<script type="text/javascript">
$(#tab1).click(function() {
$('#information').load("inc/tab1.html");
return false;
});
$(#tab2).click(function() {
$('#information').load("inc/tab2.html");
return false;
});
$(#tab3).click(function() {
$('#information').load("inc/tab3.html");
return false;
});
</script>
Also by doing it this way is the content that is currently in the div hidden once the new content is loaded?
Then i was wondering how to add animation to the loaded content?
try changing:
$(#tab2).click(function() {
$('#information').load("inc/tab2.html");
return false;
});
to
$("#tab2").click(function(e) {
$('#information').load("inc/tab2.html");
e.preventDefault();
});
Notice the quotes around tab2 (you need to have those unless it's body, document.
Also notice the e in function(e). With that you can prevent a link from redirecting to another page with the code e.preventDefault() inside of that function.
That's because there are several syntax errors in your code, you are missing quotes for the selectors.
$('#tab...').click(function() {
// ...
});
You can also use the href properties instead of having several handlers:
jQuery(function($) {
$('.one-third a').click(function(e) {
e.peventDefault();
$('#information').load(this.href);
});
})
Im trying to create a button with an data-transition but is not working.
when I click the link contactInf, it can not form page basicInf switch to page contactInf!
My browser is firefox14.1.
Below is my code:
<body>
<div id="basicInf" data-role="page" data-theme="c">
contactInf
</div>
<div id="contactInf" data-role="page" data-theme="c">……</div>
</body>
May be you're looking for something like:
HTML
<a id="basicInf_link">basic</a>
<a id="contactInf_link">contact</a>
<div id="basicInf" class="page" data-role="page" data-theme="c">……</div>
<div id="contactInf" class="page" data-role="page" data-theme="c">……</div>
JavaScript
$('#basicInf_link').click(function () {
$('.page').hide();
$('#basicInf').show();
});
$('#contactInf_link').click(function () {
$('.page').hide();
$('#contactInf').show();
});
jQuery method:
$("#contactInf").click(function(){
window.location.href = 'yourcontactInfpage.html'
});
OR
Change your DIV to
<div id="contactInf" data-role="page" data-theme="c" onclick="redirectTocontactInf">……</div>
and write this function in your javascript file
function redirectTocontactInf(){
window.location.href = 'yourcontactInfpage.html'
}
PS : Replace yourcontactInfpage.html with the name of the page you want to redirect your user to :)
I have found this code to make a menu that collapses when the user clicks on the minus sign within a page. But the menu shows all the contents within the Main Item when the page first loads. I would like to make the page show just the Main Item when the page loads. This is the code:
<script langauge="JavaScript" type="text/javascript">
function doMenu(item) {
obj=document.getElementById(item);
col=document.getElementById("x" + item);
if (obj.style.display=="none") {
obj.style.display="block";
col.innerHTML="[-]";
}
else {
obj.style.display="none";
col.innerHTML="[+]";
}
}
</script>
</head>
<body>
<a href="JavaScript:doMenu('main');" id=xmain>[+]</a> Main Item
<div id=main style="margin-left:1em">
<a href=#>Item 1</a><br>
<a href=#>Item 2</a><br>
<a href=#>Item 3</a>
</div>
<br>
</body>
</html>
I would be very grateful if someone could show me how to change the code to do this.
Thanks
window.addEventListener('load', function(){
document.getElementById('main').style.display = 'none';
}, false);
Change:
<a href="JavaScript:doMenu('main');" id=xmain>
to:
<a href="JavaScript:doMenu('main');" style="display: none;" id=xmain>
BTW, as some side notes the code you found is not very good. If this is intended as a professional project I wouldn't use it.
For one, I would change:
obj.style.display="block";
to:
obj.style.display="";
To avoid some bugs in certain browsers.
I think that changing
<div id=main style="margin-left:1em">
to
<div id=main style="margin-left:1em; display:none">
should work.