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
Related
The website I'm building has a menu (i.e. navigation bar). The menu shows up on each page. I will have to edit the menu regularly, and so I wanted to have only one menu.html to edit that would be used on all pages, using jQuery's .load
I used this stackoverflow answer to successfully implement my centralized menu. In my index.html it looks like this:
<div id="menu-placeholder">
</div>
<script>
$(function(){
$("#menu-placeholder").load("menu.html");
});
</script>
The menu is a standard .html that has CSS to back it up. They all worked perfectly before centralizing my menu.
However, I want my menu to be sticky, and this no longer works. I have a menu.css which implements a grid and makes it sticky. It worked before I changed to a centralized menu. Now the menu scrolls up without sticking. Elements inside the grid can be made sticky, but they are only sticky in relationship to the menu, not the page. My theory is that because the menu is being loaded into menu-placeholder, the menu is sticky in relation to menu-placeholder, and not in relation to the webpage/body. I have tried to make menu-placeholder sticky, but it doesn't seem to do anything. Is my theory correct? And if so what is the solution? If not, what is causing the problem?
I have solved it!!! And I am so angry.
<div id="menu-placeholder">
</div>
<script>
$(function(){
$("#menu-placeholder").load("menu.html");
});
</script>
This code must go inside the html element that you want to make sticky, not outside of it. So it looks like this:
<menu>
<div id="menu">
</div>
<script>
$.get("menu.html", function(data){
$("#menu").replaceWith(data);
});
</script>
</menu>
and then menu.html would be a copy of your original menu, but with the menu tag removed. I tried everything, including almost this solution, but it never occurred to me to place the div and script inside the menu.
I am trying to separate a header and footer of my webpage from the index page. I found a javascript code and html tag for this:
<script>
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
</script>
<nav data-load="header.php"></nav>
It worked out. It displayed the header in the index page. However I just noticed that when I am trying to hover the menu in the index page, the submenu can no longer display. while in header page there seems to be no problem. It displays the menus properly.
I can still see the submenus in header page whenever i hover the mouse. Nonetheless I can no longer do this on index page.
I am thinking maybe there's a conflict between my javascript code with the code I used to link the header in index page.
Please help me figure out what's wrong and what would be the possible code for this in order for it to display the menu properly.
Thank you!
you can use php header function rather than using 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
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 :)
I've been messing around with a ton of different attempts none of which have proved even remotely successful. If someone is willing to, would you either walk me through or point me in the right direction.
I'm using http://sorgalla.com/projects/jcarousel/ Jcarousel as the image carousel on the top of the page with 3 images up at a time.
I'm looking for something like this following link http://tamarackcellars.com/ but where the content at the bottom of the page changes instead of the whole page loading to a new page when you click on one of the wines.
Any help would be greatly appreciated.
ok I am assuming you can get the carousel plugin to work, if not let me know.
If I understand you right, you want the content of the page to change but not to redirect. If this is static content then what you want is relatively simple and can be solved many ways.
First set up your carousel and give each image or content the same class like class="carouselObj". Then create a container on the same page that will hold different information with respect to each element of the carousel.
<div id="container">
<div class="info">1st image info</div>
<div class="info">2nd image info</div>
<div class="info">3rd image info</div>
<div class="info">4th image info</div>
</div>
Now to add some jquery to make it functional.The idea here is that when one of the images changes via click or from a timed event, the corrosponing information in the container will also change. Here is some code to give you the idea.
$('.carouselObj').click(function(){
var index = $('.carouselObj').index(this); // gets the index of carousell image clicked
$('.info').eq(index).show().siblings('.info').hide(); // shows the corrosponding element and hides the others.
});
Now in the css file you need to make sure you originally set the first info class