Filling in a CSS Element with Javascript - javascript

I am working on a website and wanted the links to substitue only a certain text instead of loading a whole new site because of (overexagerated example) 3 new words.
The body is divided into one CSS Elements and one for the links
<body>
<div id="body>
Here is the entire body, inside a css block
</div>
</body>
<a href="home.html" >
<div id="box">
<br> Home <br>
</div>
</a>
Here i have a nice little div element (which intern is the link) however by clicking on the link i would open an entire new website (which would mean loading all elememts on the site again. I want to make it so that only my body loads and all the other things stay ... something similar to frames in html, however i am trying to stay away from frames due to SEO.

I can't be sure about your question cause you didn't post any code but i think you need jquery .text() to get it and modify with simple javascript.
Try looking at this:
jquery text

Related

Anchor tags not working in Google Chrome (when linking to separate webpage)

I'm a bit new to html, javscript, and css so I apologize ahead of time for any obvious ignorance. I'm using an anchor tag so that when a user clicks on this link it will jump them to a specific div on another webpage:
index.html:
<div class="notice">
<h2>If you have any trouble while you're here, please <br>
get in touch with me and let me
know!</h2>
</div>
contact.html:
<div class=contact id="contactForm">
However, when you click on the link, Chrome ignores the # and just loads /contact.html. But then, when you navigate back to /index.html and then click on the link again - then Chrome decides to pay attention to the # and loads /contact.html#contactForm.
I've researched javascript threads that use various scroll() functions - but they all seem to work when linking to a place on the same webpage. I'm having trouble finding a workaround for when the anchor is on a different page.
UPDATE
I've also noticed that it seems to be the fault of random Chrome plugins - as with all plugins disabled, the anchor tag works just fine. However, I can't exactly expect all visitors to the website to have all their plugins disabled.
You actually need to add an anchor element with a name attribute containing the hash string, this element may be empty. Use this:
<a name="contactForm"></a>
<div class=contact id="contactForm">
...your code

Link to div not working properly

I'm making a site where almost all the different sections are on the home page and i use jQuery scroll to scroll to them when i click the link in the navigation bar
I had to make a different page and i wanted to link those sections to that page too, like when i click about on the other page it takes me to the home page's about div so i used this code for it
About.
It does take me to the about div on the index but that div is on the middle of my screen instead of top
I mean the starting of the div is supposed to be at the top of the screen (just like it is when i navigate to it using a link on the homepage)
Is there any way to fix this?
Edit:
What it looks like when i use the link on the same page:
https://gyazo.com/b51f24e9a13c6f0c4115bc38df34081f
What it looks like when i use the link on the other page:
https://gyazo.com/3724c7486aeef34cc7be5547fb9ffa53
I hope it makes sense
Edit: It works fine in chrome and the issue only occurs in firefox
I created a plnkr< https://plnkr.co/edit/jmKjbwmKCvKGfz3QuExx?p=preview > !#div2 will be on top after clicking the hyperlink on new.html!
<a href="index.html#div2">
Is there enough content after this About section. If isn't then it won't appear on the top.
What does the other end of the anchor look like? It should go e.g. like this:
<div id="about">...</div>
One of the reasons for this can be that your page does not have enough height to move about to the top of the screen. To overcome this, you can add a min-height to the page or the div.
Another reason can be that a part of the page is populating after page load (for example - images) which is increasing the height of the page. So, then the page is loaded about shows at the correct place, but when you link it from another page, it does not get enough time to populate that part of the page. To solve this, you can make that part of the page of fixed height in CSS.
I can give you code solution if you share code for your page.
You can use document.location place of anchor tag.
<div id="section1_ID">Click Me</div>
<div id="section1_ID">Click Me</div>
<div id="section1_ID">Click Me</div>
Referral link.
<div onClick="document.location='service.html#section1_ID';">
<div onClick="document.location='service.html#section2_ID';">
<div onClick="document.location='service.html#section3_ID';">
For more clearification.
Link a div to a particular section on a different page in HTML

super fast switch menu links without using tab

http://www.revivalx.com/my/#home
try to navigate with the menu, the content load real fast, unlike a normal one. What is the technology behind? I'm sure it isn't tab because I inspected the markup and network tab with Chrome dev tool. Just curious.
By the look of some of the files that have been included it's using backbonejs.org
The website is using Backbone.js
But the underlying technique being used is:
Its loading all the templates
http://www.revivalx.com/my/templates/content/privacyTemplate.html
http://www.revivalx.com/my/templates/content/aboutTemplate.html
,etc
at page load and caching them. Then when you click on the menu it just replaces the html of the container with the template. So its sort of working like tabs.
It is Simple jump to section trick.
First create div with id's like service contact etc.
<div id="contact" ></div>
<div id="service" ></div>
Make sure that the gap between them is such that they both doesn't appear on single page
Now create link like
contact
serice

Smooth menu navigation

I'm currently in the midst of developing a site. The current layout is pretty basic.
There's a horizontal menu navigation across the top, and there is a main centered div beneath the menu that holds the rest of the HTML and information and so on.
Now, when a user clicks on an item in the horizontal menu, the page reloads to display the new page with the new HTML as it should. However, on each page I have to copy the menu HTML to it. This seems redundant and unnecessary. So I was thinking about it and thought of this way...
Through javascript, I get the html page and display on the main content div. Like so...
$.get( "newpage.html", function( data ) {
$("#content-div").html( data );
});
All scripts, css, and html and now loaded onto the main original page. I can two immediate benefits...
The page has a seamless, smooth transition when it comes to displaying a new page
I do not have redundant HTML when it comes to the menu
Is this optimal though? Is it a good practice to use a $.get(); call to load a new HTML page as the main method of page navigation? Are there better alternatives?
I've considered Jquery Tabs but this requires all of the HTML to be loaded beforehand, which I was hesitant about.
The answer is that it depends.
If there are multiple pages that have similar layouts and simple elements, then yes, the $.get(); method would work, but could be even faster and smoother.
When I come across this junction, I would rather just keep the existing HTML elements and just load new content into them.
Again, I don't have the full code, so I could show you (and anyone else who sees this) what I mean if you shared, but that's up to you.
Now, if some of the pages had more complex elements, you should navigate by reloading.
In that space, consistency is key.
To not be redundant with your code, you just need to make your site like a template.
For example, you could have three pages (header, footer, and the page itself) and use PHP to load the header and footer in while only writing the code once.
header.html
<html>
<head>
Fill with meta info, title, etc.
</head>
<body>
<div class="nav">
Put the nav here.
</div>
index.php
<?php include_once "header.html"; ?>
<div class="main">
Just fill it with all the page's content.
</div>
<?php include_once "footer.html"; ?>
footer.html
<div class="footer">
Footer info here.
</div>
</body>
</html>
What this allows is, aside from edit once, do everywhere, non-redundant HTML and also for CSS edits to be preserved across the site, as long as in each individual page the <div>'s are in the same class
Again, as I first said, it all depends.
If you have simple content and don't mind spaghetti code, you would be better suited to just replace the div info directly on each navigation use.
But, this method is, at least from what I've experienced, more widespread and versatile, so I'd recommend the template-esque method with PHP being loaded in.

Duplicated Pages Displaying Differently

Ok I have been having fun and games trying to sort an issue out with a website.
The home page http://www.haylockpittman.co.uk/ has been replicated to http://www.haylockpittman.co.uk/new-refurb-publish/
BUT, as you can see the images on the sub page do not align correctly like the home page.
I cannot use the home page template on the internal page as we need to change the text at the bottom and as it is set up it the text is widgetised. But we duplicated the template and renamed it.
I have compared the source codes for both pages and apart from titles the only difference is at line 142/143 where the home page calls
<body class="home page page-id-92 page-template page-template-front-page-php singular two-column right-sidebar">
and the internal page calls
<body class="page page-id-2118 page-template page-template-renorefub-php singular two-column right-sidebar">
The problem is I don't want the images on every internal page so I am wary about what I need to change. I assume I need to add a new class or div id and call it. But I am pretty novice at this and the original designer wont help so any advice would be much appreciated.
Thanks in advance.
Home page has CSS rules for '.home #outer #left' but the second doesn't (as it doesn't have the .home class on the body)
Add in extra CSS rules to apply the CSS to the same DIV on the second page.
Use Firebug/Developer Tools etc next time :)

Categories

Resources