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.
Related
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");
});
I searched several of the suggested questions that came up when typing this, but I couldn't find an answer to my problem.
I'm using Uikit V2, and I have a div with the Sticky component. Here:
<div class="uk-sticky" data-uk-sticky id="nvbr">
<nav class="uk-navbar-center">
<a class="uk-button" href="#pg5"><h3>Contact</h3></a>
<a class="uk-button" href="#pg6"><h3>AboutUs</h3></a>
<a class="uk-button" href="#pg3"<h3>Services</h3></a>
</nav>
</div>
This works fine on the full screen, but when I resize to a small screen, the bar gets very wide. I open then in the inspector in Chrome and I get this line:
<div class="uk-sticky-placeholder" style="height: 123px; margin:0px;">
Where would this be in my code and how can I fix it? I looked in Uikit and the Uikit.js.
(I should note, that when I am in Inspector, if I change that 123px to say 10px, it looks fine.)
Thanks all.
I think it just counts height based on collapsed elements in the viewport.
https://github.com/uikit/uikit/blob/v2/develop/src/js/components/sticky.js#L286
The thing I would do if I were on your place, I would hide navbar elements on smaller devices with conditional classes and prepare of canvas menu (take a look inside docs).
Or try to take over control with your own js script.
I am new to front-end development. I was trying to code an annotation tool. A sample screen is shown on the image below. After the user select a sentence, an annotation box appears on the right side bar at the same horizontal position as the highlighted sentence. Any ideas about how I can achieve that effect?
Here is my html structure. I used the framework of Zurb Foundation:
<section id="main">
<div class="row">
<div class="small-8 large-8 columns"id="rawdata">
<p> <span class="sentence">2:22 So, last time I was here, I don't know if I told you this, but, um, we kind of did a "I like, I wish" activity on paper, about things that you like about studio, and things that you wish would change.</span><span class="sentence"> Um, do you want to share any of those thoughts now, so maybe we can talk about them? [name], I have yours if you want to look at it again.</span></p>
<p><span class="sentence">2:47 I forgot to add something.</span></p>
<p><span class="sentence">2:54 Well, I don't know, in terms of what I dislike about studio.</span></p>
<p><span class="sentence">2:57 So, some people wrote in theirs that, um, they dislike how cluttered it gets.</span></p>
<p><span class="sentence">5:09 I don't get bothered.</span>< <span class="sentence">I like the draftiness, I'm a little...</span><span class="sentence"> I'm one of the ones that opens the windows, and like—</span></p>
</div>
<div class="small-4 large-4 columns" id="annotations"><p></p>
</div>
</div>
</section>
JS for selecting sentence and adding annotations:
<script>
$('.sentence').click(function() {
$(this).toggleClass('sentenceStyle');
var y = $(this).offset().top;
var para = document.createElement("p");
$("#annotations").append(para);
para.innerHTML="this is an annotation";
para.css("position",'absolute');
para.style.top = y;
});
</script>
And here it is the fiddle: http://jsfiddle.net/yujuns/HDe6v/3/
There are some things that you want to change in your code.
First what you want is to get the offset of the selection. That can only happen if you put an html tag around the selection and then get its offset. You can then place an absolute positioned message box by setting its left and top offset to the offset you got from html element.
In the following fiddle, I have shown a basic implementation to give you the basic idea. Hope it helps.
Fiddle
EDIT:
Try this fiddle update.(In response to author's question). I have added comments to lines of code that I added to js. I also added position: relative to css for annotations
Updated Fiddle
I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");
I'm using simplecart.js which generates data for me to add to a cart, and then passes it to PayPal for me.
I have successfully added the 'add to basket' and 'checkout' features but am finding styling the JS-generated code impossible as no styles applied to it will work.
This is the code site has given to me, which generates a number of items such as name, quantity etc from stored data. It outputs all information correctly but any styles applied to the class names do nothing.
This is the code that generates the data:
<div class="simpleCart_items"></div>
This is the result from the web browser:
<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>
<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The Jenny Snood £11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
Remove
</div>
</div>
</div>
</div>
The browser is receiving all the data correctly, but applying any styles to the class names does nothing. For example, I have:
.headerRow{
background-colour:#0F0;
}
The result should be that the background of headerRow be lime, but nothing happens. It is not calling the style correctly.
I have tried everything but none of the classes will fetch the styles applied to them.
Here is a screenshot of how it looks, obviously not very nice unstyled, but I can't apply any styles at all to it.
Here is a link to the live site
A further examples:
I've added the code given which generates the totals:
<div class="simpleCart_total"></div>
I have tried giving it it's own new class and also styling the original, with !important - none of this works.
<div class="totals simpleCart_total"></div>
.simpleCart_total{
background-color:#0F0 !important;
}
.totals{
background-color:#0F0 !important;
}
None of the above seems to have any impact whatsoever.
There is some other css or inline javascript affecting the custom style your are attempting to use.
To mitigate this issue do one of the following:
Add !important after each css statement like so:
.headerRow{background-color:#0F0 !important;}
Reorder the css files so your custom css file is at the bottom
The problem here is that the styles are being applied dynamically by the js after your CSS (ie during the initialization of the plugin). You're only hope is to style it after this initialization with your own js, I think.
You can check this in Firebug... If you look at the elements there, you should see a bunch of inline styles being applied to them. These will trump your CSS in the header (and even the inline CSS you provide beforehand).
Edit: I saw some junky characters just before the directives in question (as well as those pointed out in another answer). I would try removing all the white space after the preceding directive and before the broken ones. It does not appear that the js is dynamically changing anything.