For the last couple of days I've been trying to figure out what's wrong with my site (https://hungry-goldberg-git.netlify.app/). The products, classes, gallery and contact pages all have a repeating header that pulls from the file (pageheader.html). The strange thing is about 60% of the time when I load the site and click through the links the page header displays properly. Other times, the pager header will show on 2 or 3 of the pages, but not the others. Another interesting thing is I am able to click through all of the links and see the headers the first time, when I click on the link again the header goes away (ex. I click products > classes > gallery > contact > classes... I will not see the text in the header again).
Through looking at into the Developer tools I see the property is set to null. I know this happens when the script tries to execute before the element is rendered on the page, but I can't figure out how to correct this. I already have <script src="/js/main.js"></script> at the bottom of my HTML right before the closing body tag. I also have my opening body tag to <body onload="titleInjection()">in hopes that would allow the JavaScript to wait until my page was fully loaded before it ran. However, that didn't work.
I also tried <script src="/js/main.js" defer></script> at the bottom, but that didn't work either. Can anyone possibly shed some light on what I'm doing wrong?
Just in case you would like to see all of the code I am using I'm including portions of it below.
classes.html
<!--===================== Page Title =====================-->
<header id="pageheader"></header>
pageheader.html
<div class="w-full mx-auto h-56 bg-img-header offset-navbar relative">
<div class="flex flex-col items-center">
<h1 id="sectiontext" class="font-merriweather tracking-wider text-shadow-black font-bold text-gray-300 text-center uppercase text-6xl absolute transform-center text-"></h1>
</div>
</div>
main.js
//loads pageheader and footer on pages//
$(function() {
$("#navigation").load("/navbar.html");
$("#pageheader").load("/pageheader.html");
$("#footer").load("/footer.html");
});
//replaces the text in the page header with the page's title//
var x = document.title;
function titleInjection() {
document.getElementById("sectiontext").textContent = x;
}
***NOTE: I used to have the variable defined after I called the function, but I saw another answer on here that suggested I should define that first. It helped go from 1 page header loading correctly to about 2 - 3, so I left it like this. I also tried to simplify this by writing document.getElementById("sectiontext").textContent = document.title;} but that also didn't work.
TLDR: I'm using innerHTML/TextContent to change my web page and it only works sporadically.
.load() is asynchronous. So when you're trying to find the sectiontext element, it doesn't exist yet because .load("/pageheader.html"); hasn't completed. You should call titleInjection() from its callback.
$(function() {
$("#navigation").load("/navbar.html");
$("#pageheader").load("/pageheader.html", titleInjection);
$("#footer").load("/footer.html");
});
Related
I know it has been explained in many places here but I can't get it to work.
It concerns: how to use JavaScript which is in - under wwwroot created - folder in a *.js file.
What I am using:
Blazor Server App empty (VS2022, C#).
I only need/use Server App in VS2022 C# and empty - without any predefined navbars and other elements. So there are no any *.cshtml files except one which is automatically created while creating a "Blazor Server App Empty" in VS 2022 and that is "_Host.cshtml"
And I don't want to use any other template in VS 2022, only this one mentioned.
So, after creating a "page" using this in VS integrated template, I added following in MainLayout.razor (I am using *razor and only razor - no any cshtml):
// this was originally created as in the template in VS2022
#inherits LayoutComponentBase
//this one also:
<main> #Body </main>
// That is what I added here in MainLayout.razor, it's from this site: [http://jsfiddle.net/Ag47D/3/](https://www.stackoverflow.com/)
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="home">Home</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="link">Link</li>
</ul>
</div>
</div>
</div>
</div>
And then I added the css part to the existing "site.css" in that simply VS 2022 project:
`.navbar #nav > .active > a {
color: red;
}`
And finally - and that is the big issue for me to understand WHRE/HOW to handle that . a simply JavaScript part (you can find that on the same site mentioned):
` $(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});`
I added that to a created folder in wwwroot, the flder is called: "js" and the file inside that folder is called: "setactivetab.js". In that file is the mentioned part of javascript.
In "_Host.cshtml" I added then that, here the part of that _Host.cshtml where you can see what I added:
`....
....
Reload
<a class="dismiss">🗙</a>
</div>
<script src="~js/setactivetab.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>`
So I tried with:
<script src="~js/setactivetab.js"></script>
and:
<script src="js/setactivetab.js"></script>
and:
<script src="~/js/setactivetab.js"></script>
But nothing worked. I mean: TABS are shown on the page - no question about that - but if I click on one of that TABs - nothing happens, the color isn't changed.
Somehow I am not able to understand how to use a self created/from google downloaded, JavaScript for simply changing of the color or to set a selected TAB as active/current or however we can use that.
I tried so many examples described on the web. I can't get that working - maybe I am missing/not understood some fundamental knowledge of using a JavaScript. I simply don't know the way how one can use that.
Can you please post me here a working example of a navigation TABS, ideally self created and simply? Important is: WHERE to put a javascript and how to access that properly so the clicking on a TAB wil lchange his color and stay so until I click on another TAB in a simply - if possible: horizontal, not vertical, navigation bar.
I have enough from searching/reading of many web sites descriptions as there works all and if I copy&paste some simply example, it doesn't work.
hope you are all safe and well.
Have inherited a SaaS/web based 'design online' website, and it runs okay for our small business, before I have plans for a full Magento2 build, however there is a 'show more/show less' function I would like to get rid of on the product pages. See here, for example:
https://black-rhodium.co.uk/Products#!/products/bolero-s
can drop blocks of code in, but don't have an option in the back end of the web based site builder to turn this 'see more/see less' feature on and off.
Can any of you guys help me with a snippet of code to force it to disappear, so I just have the block of text for the product description to display as normal in full, on page load?
have already tried the below, to no avail
<div class="ws-clamp-text-show-hide {display: none;}">Show more</div>
<div class="ws-clamp-text-show-hide {display: none;}">Show less</div>
Have also tried !important and 1/0/0/0 on the above, and that hasn't worked either.
Have placed in body, body2, head, footer, none has worked.
can delete this in opera inspector, to give me the result I want, with the entire product description there:
<div class="ws-clamp-text-show-hide focus">Show less</div>
Although, nothing I add will essentially override it.
someone could help me out, that would be appreciated. Many thanks.
Just to fully understand.. do you want to hide
<div class="ws-clamp-text-show-hide">Show more</div>
and
<div class="ws-clamp-text-show-hide">Show less</div>
using CSS?
if so, try,
<div class="ws-clamp-text-show-hide" style="display: none">Show more</div> same for the show less one.
Other CSS alternatives would be:
width: 0; height: 0;
visibility: hidden;
opacity: 0;
But I think that in your case you'll have to remove the function from the backend.
So, I run my church's website and I try to stay pretty basic in the coding, but we have seasonal pages that we add and remove from the website all the time so I get tired of changing the "simple" HTML code on every page for the nav bar. I have found where I can use PHP and have one code, like but is it possible to have the current page highlighted, i.e. on our website now, the current page name is bold and a different color.
I have also seen JS do this (Highlighting current page in the nav) but I don't really understand how to implement this, so if you think this could be the better route for me, and can help explain how to do it, that would be cool.
Any help would be great!
add an id attribute to the body tag of each of your pages, like this:
<body id="home"> <!-- this would be for your home page for example -->
...
<body id="about"> <!-- this would be for your about page... -->
add the same to the li tags of your nav, like this:
<li id="home">Home</li>
<li id="about">About</li>
then in the CSS file just do this:
body#home li#home, body#about li#about { // style of the active menu item }
Ok Im trying to do a few different things but they are all pretty simple. I can only find answers that somewhat give a piece of what Im trying to do and when I mix and match different answers they don't work well together. I figured it would be better to ask specifically.
The hidden divs on the bottom are filled with images so I only want them to load when a link is clicked and not when the page is loaded. Each hidden div will have three divs of its own that target the three top divs so when you click the link for that hidden div all three of the divs in that hidden div load into the three top divs. I'm pretty sure I know how to make one link trigger different events so you don't have to help me there unless you know a simpler way to do this. Here are the main things I need help with:
loading div content only on click and not page load
targeting a div to load other div content into
when link is clicked to open a new hidden div, the other hidden div that was showing goes away
and because this is a tech website it would be nice to have some kind of tech-y transition when switching between/loading new divs. If nothing else a fade would work but you don't have to help me with this part, just if you happen to know a code or webpage with different transition effects for loading content that would be nice.
I don't really have any pre written code yet that will conflict with whatever you suggest so you can suggest anything. You don't have to write everything out, I can catch on with an example. Maybe.
Thank you I know there are separate individual answers but again I have had trouble trying to get them to work together or they will do part of what I need but not the other. I thought if I just asked instead someone could whip up a code for me in like 5 minutes. Thanks.
edit: Ill add code but I don't think it'll help much.
<div id="menu"> <a> -Cyber glasses Link- that opens cyberglasses div and loads it into presentation div </a></div>
<div id="presentation">
<div id="div-pic-1">Empty space to load stuff into</div>
<div id="center-content">Empty space to load stuff into</div>
<div id="div-pic-2">Empty space to load stuff into</div>
</div>
<div id="cyberglasses">(this div does not appear on pageload and only loads on click of the menu link named "Cyber glasses Link" at top of page)
<div id="cg1"> picture 1 of cyber glasses to load into id div-pic-1 </div>
<div id="cgcontent"> description of cyber glasses to load into id center-content</div>
<div id="cg2"> picture 2 of cyber glasses to load into id div-pic-2<div>
</div>
The menu link at the top named -Cyber glasses Link- loads div cg1 into div-pic-1
and div cgcontent into center-content
and div cg2 into div-pic-2
all at the same time. But the only div that loads on page load is the presentation div and menu div not the cyberglasses div. Cyberglasses div only loads on click of the cyber glasses link.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="navigation">
Welcome
Frog
Lamma
</div>
<div id="content"></div>
<div id="image"></div>
<script>
$(function(){
$('#navigation').on('click','a',function(e){
e.preventDefault();
$($(this).attr('rel')).load($(this).attr('href'));
});
});
</script>
</body>
</head>
</html>
Demo: https://oteck.co.uk/sample/load.html
I am creating a jquery mobile web app which contains 3 pages, my header/nav for these pages doesnt change but in all the examples Ive seen the header and footer is added to each page. Is it possible just to add 1 nav and 1 footer then just switch the pages main content in and out like this structure:
<div id="header" data-role="header"></div>
<div id="page1" data-role="page">content</div>
<div id="page2" data-role="page">content</div>
<div id="page3" data-role="page">content</div>
<div id="footer" data-role="footer"></div>
Basically is there a way of just showing/hiding the main content and doing nothing with the header and footer?
Any advice on this would be great
Kyle
No, unfortunately JQM doesn't support this (yet), you'll need to add your role=header and role=footer on EVERY role=page you got (all 3 of them).
See documentation
I would stick to $.mobile.changePage() since that takes care of hashing and a lot of other events and not just use JQuery to .load() new content...
Hope this helps
Have a look at the load() method in jQuery -> http://api.jquery.com/load/
Here is an exmaple :
$('#navigation').click(function() {
$('#page1').load('page1.html');
});
This means that when something with an id of navigation is clicked it will call the load() function and replace the div with id of page1 with the contents of the loaded file.
you can use .load() in jQuery
for example in every page you will have this:
<div data-role="footer" class="ui-footer"></div>
now build this function:
function goTo(pageURL, transitionType) {
$.mobile.changePage(pageURL, transitionType);
$('.ui-footer').load('assets/includes/footer.html');
}
now when you move between pages, try onclick (or from code if you like) call:
goTo('home.html','slideup');
that would do the trick (this is what I use)
you can do the same for the headers as well.
keep in mind if the header or footer content changes for each version of the app (such as localization) you have to call this first, then fill in the localization text or anything else.
I hope this helps for your purpose