I am trying to change the content of the yellow area when the user clicks on 'Dashboard', 'customers' etc: Here is the template I used
First I tried to change index.js I gave an id to div area:
$('.icon-dashboard').on('click', function() {
$("#area").load("secondpage.html #area > *");
});
This didn't work for me. Any suggestions to change the content between main tags?
Your selector for the load command is wrong. Your HTML shows a <main> tag with <div class="helper"> so you would want to use $("main .helper").load(...) to load content into "helper". Or, if you want to replace the "helper" div with whatever comes back from .load, just do $("main").load(...).
Also, passing "secondpage.html" to .load() is only going to work in the local browser. I'm assuming you're only doing that because you're testing? Ultimately, you'll need some backend script at an URL to return your content.
Related
So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');
I am using angularjs for part of my page say single component, which is used in many pages.Now my problem is hash url does not work now.
Example: I have a div#hello in my page and URL is given as Url#hello.but it does not go to that particular div just the top of the page is diaplayed.
So could you guys help me here please?
NOTE:The url#hello is changing to url/#hello.The page cannot be changed to angular and only that single component use angular.
EDIT: Thank you Stephen:) yes, of course, we need to use routing.The thing is, after page load, if we change the url back to URL#hello it works.So is it possible to do it in other way apart from Routing and $angularscroll ?(i.e) just from the JS or jQuery perspective ?
Ok, thanks. I've misunderstood you. I think I have a better understanding now. Please correct me if I am wrong:
So, you're essentially trying to make a hello link that points to a section within the same page. When you change the url to pageUrl#hello the page should jump down to the section with the id called hello.
But the problem is that since your section has an AngularJS component that uses the ngRoute module, this routing functionality is making your page redirect to pageUrl/#hello instead of jumping to the HTML section with the id='hello'.
Is this correct?
Solution
If I understand your problem correctly, the solution is to check if your ng-app='appName' attribute is on the body tag. If it is, then move it down to your component's parent element.
If a hash link is a child of the ng-app element, then when you click it AngularJS thinks you want to redirect to another view. This is what causes the Home link to redirect to pageUrl#/home.
<body ng-app="demoApp">
Hello <!-- redirects to #/hello -->
<div id="hello"></div>
<!-- ... -->
So if you put the hash link outside of the ng-app element then it will behave as expected when you click it.
<body>
Hello <!-- jumps to the 'hello' div -->
<div id="hello" ng-app="demoApp"></div>
<!-- ... -->
On Page Load
If you want the page to jump to the hello div on page load, then set window.location = '#hello' inside your controller. Then, when you visit pageUrl#hello, the hello div should appear instead of the top of the page.
If you don't have a controller, or don't want to use one, then after your document loads, check the hash url and change it programmatically.
$(document).ready(function(){
if(window.location.hash == '#hello'){
window.location = '#hello';
}
})
I am having trouble making link.
I have a slide in a Magento store. Theme is responsive and slider is javascript.
This is the code i have:
<div id="camera_wrap" class="camera_wrap camera_orange_skin">
<div data-thumb="{{skin url='images/camera/slides/thumbs/slide1-thumb.png'}}" data-src {{skin url='images/camera/slides/b1.jpg'}}"></div>
</div>
Slider is showing picture and assosiated thumbnail. I want to make slider clickable but i cant get it working. Any ideas?
If i place
onclick="location.href='newurl.html';"
inside div, image is not showing :(
Any suggestions?
Don't use inline onclicks... Assign your div a class and a custom data attribute. Example:
<div class="onclick-link" data-href="mylink.html">Some content here...</div>
And then:
$('.onclick-link').unbind('click').click(function() {
window.location.href = $(this).attr('data-href');
});
This can be used for all div's you want to turn into a link, bu assigning the class and the data-href attribute.
My link
The easiest (and most semantic) way to make a link, is to use the <a> element.
If you REALLY want to go the javascript way, you can bind a handler using jQuery
$('#camera_wrap').on('click', function(){
// your code
});
I'm trying to put a piece of jquery together to show a hidden div and at the same time, refresh the parent div so that the javascript can amend and display the new height.
This is what i have so far but after some research have found than to refresh a div you have to use ajax and was wondering if anyone could lend a hand.
var $r = jQuery.noConflict();
$r(document).ready(function() {
$r('#open').click(function () {
$r('#expandable-2').show('slow');
$r(this).load(location.href + '.panel > *');
});
$r('#close').click(function () {
$r('#expandable-2').hide('1000');
$r(this).load(location.href + '.panel > *');
});
});
So far I have this,
a link with the id's of open and close
once clicked they give the css property of display block and display none to a div expandable-2
the part I'm stuck on is the refreshing of the parent div .panel in order to show the displayed div correctly.
Reason being is that I'm currently using the CodaSlider script in my page and the height is dynamically brought in depending on how much content is in the container. Now in order for the new content to be displayed when clicked open, the container needs to be refreshed thus showing the new content with a new height.
Hope that makes sense but any help would be awesome.
to "refresh" a div you just need to do:
document.getElementById("myDiv").innerHTML = new_content;
new_content may be the html returned by your ajax call but you definitely DON'T need an ajax call to "refresh" a div.
You can change html of a div with html method of jQuery.
$r(".content-div").html("Hello world");
If you want to load an html from server with ajax, you should use load function as below:
$r(".content-div").load("ajax/users.html");
There is a clear mess with your code. Just a few tips:
If your parent div contains #expandable-2, then you won't be able to do the ajax call and show the animation at once, because the ajax call is gonna destroy the #expandable-2 element while it is appearing/disappearing.
The proper way of loading external code through ajax into a div is:
$r('.panel').load('/path/to/url');
This will load the response of '/path/to/url' into the '.panel' div. Make sure that '/path/to/url' only returns the new content of the div, otherwise you cannot use $r('.panel').load, but an indirect approach must be used instead (i.e.: $r.ajax)
I've got a website and I'd like to make a part of it static. What happens is that the header, the menu bar and the footer are consistent in every page. I'd like to have them always loaded and when I click the menu button, it will only reload what is the body of the site.
Is there a simple chunck of code that can early achieve this? Something in js or ajax? I'm sorry but I don't have enough experience in these languages to accomplish something on my own. I've already tried to check jQuery library but it's still pretty confusing to me.
Thank you.
I think you don't even need Ajax or css!! Just use iFrames!! They are awesome, what happens is that u only design one page as the holder of your static content (Header-Menu ...) and put one iFrame in there as a place holder for any page you want to load in it, u should use proper css code to place the iFrame where you want, now, for every link in your menu, just set the "target" attribute equal to your iFrame's name and all the links will be loaded in that iFrame and your page won't be reloaded with every link click... I'll be back with some code...
Just add in every page a div container with ID for header, menubar and footer and just load it with this:
$(document).ready(function(){
$('#header').load('header.html');
$('#menubar').load('menubar.html');
$('#footer').load('footer.html');
});
Just make sure that the html files don't have html, head or body tags within, only the HTML-Code you would write inside the div. It's just like the include function in PHP.
EDIT:
For easy and simple implementation store the code above inside a .js file (e.g. include.js) and add this inside every head just below the include of all other scripts of your html files:
<script type="text/javascript" src="include.js"></script>
EDIT2:
Another solution ist to load the content of the page instead of the header, menubar, footer.
Here you take the same specifications (no html, body, etc. tags inside your content html files)
Name your content div e.g. <div id="content"></div>
Your navbar for example:
<div id="navbar">
Content1
Content2
</div>
JavaScript Code:
$(document).ready(function() {
//Click on a link that's child of the navbar
$('#navbar > a').click(function() {
//Get the html file (e.g. content1.html)
var file = $(this).attr('href');
//Load this file into the #content
$('#content').load(file);
return false;
});
});
You should consider the use of Server Side Included : http://httpd.apache.org/docs/current/howto/ssi.html
It's not quite easy to understand (as it refer to apache configuration), but this is a really great solution.
In a nutshell, you include parts of html code in you main page :
<!--#include virtual="/footer.html" -->
You won't have to use or understand all JQuery Framewol, user agent won't have to parse (if they are able to !) Javascript.
This is a pretty good replacement of PHP / ASP / Java for this kind of purpose.
You could use ajax to request the body of each page. But this is only one possibility - there are many. An other approach could be to create you page content using a script language (php, perl) serverside and employ a function there which adds footer, header and anything else to each page.
If you have an idea of Jquery then use click event on menu links to load the page in a div like the following syntax may help you.
$(document).ready(function(){
$("a.menu").click(function(){
$("#bodyContent").load("http://abc.com/your-linked-page.html");
});
});
To load the url dynamically use the following code:
In your menu bar the link looks like:
Home
In your Jquery code:
$(document).ready(function(){
$("a.menu").click(function(){
url = $(this).attr("title"); // here url is just a variable
$("#bodyContent").load(url);
});
});
Step 1: Add Jquery file into your html page.
Step 2: Use the above jquery code and change your menu link to the new what i said here.
Step 3: If you done it correctly, It will work for you.
How about a traditional iframe?
In your menu:
<a target="body" href="URL_to_your_Menu1_page">Menu1</a>
and then further in the document:
<iframe name="body" src="URL_to_homepage"></iframe>
You may use frameset and frames and organize you pages accordingly. So, frames containing menus can always be at display and while displaying contents on click of menu u may set target to frame in which you would like to load the contents.