Limited CSS and javascript functionality when publishing website via CMS - javascript

I'm so new to web development that I'm not exactly sure how to ask this question, but here's the problem I'm facing.
I'm developing a website for a particular department in a university with its own stylesheets that are applied but that I'm unable to edit. I'm trying to make a collage of images for the purpose of site navigation - when you mousehover over an image, I want a different image to be swapped. The first method I used was javascript:
<div class="box">
<a target="_blank" href="http://bike.cofc.edu/"><img src="../biking" onmouseover="this.src='../biking-label'" onmouseout="this.src='../biking'" class="icon" alt="biking" /></a>
</div>
This worked beautifully within the cms, but when I published the image swap didn't occur - onmouseover caused the first image to disappear but the second image was not called successfully, and onmouseout didn't reverse the broken swap.
I thought that perhaps the university wasn't allowing my javascript, so I tried using just css and html:
span.imgswap-biking {
background-image:url("");
background-size:100px 100px;
border: 1px solid black;
background-repeat: no-repeat; display:block;
}
span.imgswap-biking:hover img {
visibility:hidden;
}
</style>
<span class="imgswap-biking">
<img src="" alt="biking" />
</span>
Again, this accomplished the same effect within cms, but when I published, the swap occurred and was reversible, but the background image was not successfully called. I'm afraid that background isn't recognized.
My fundamental confusion is understanding how functionality is lost when publishing websites. I don't really understand what goes on between the time that my site looks good on cms and the time that it is stripped when it is published. General guidance on how to know what sorts of scripts and css changes will work would be helpful if possible. I should mention that I am including css at the top of the webpage because I don't have access to the stylesheet - will the university stylesheet always override mine? Thanks in advance.
Walt

Related

How do I change all CSS for a shopify buy button in an external HTML file?

I recently started a e-commerce and made it trough shopify. Now i made a separate HTML and css for my website because I wanted to it myself. So i pasted in the shopify Buy Button thing and now I wonder how i can edit the css for the Buy button in my HTML since there is almost none to edit in the code I got from the shopify Buy Button thing?
When looking at the site in inspector on google chrome i clearly see that there is more css then in my html file so how can i edit all of the css for the buy button?
Sorry for any grammatic faults
The css thats imbedded in the html and script code I got from shopify Buy button does not contain all css for the Buy button. I've been digging around a bit now and can't seem to find anything that might fix this so hoping posting here will :)
Or is it possible to make a totally new style.css and customize everything from scratch? That would be perfect aswell since i know css and html i just want the buy feature.
To change the CSS for a Shopify buy button in an external HTML file, you can use the style attribute on the element to add inline styles. For example:<button style="background-color: red; color: white;">Buy Now</button>
Alternatively, you can use a stylesheet to define the styles for the button and then apply those styles using the class attribute on the <button> element.
<button class="buy-button">Buy Now</button>
.buy-button { background-color: red; color: white; }

How do I fetch specific values from a Wordpress Product to insert them into a HTML file?

Please I need your help😭, I created this code and it's supposed to show a WordPress product:
<a class="product" href="#">
<figure class="product__figure">
<img
class="product__figure__img"
src="#"
alt="Product Image"
/>
<figcaption class="product__figure__figcaption">
<h3 class="product__title">Lorem ipsum dolor sit</h3>
<span class="product__price">0.00 <span class="euro">€</span></span>
</figcaption>
</figure>
<span class="product__button">Options</span>
</a>
I have 2 div which contain each 4 times this code, the purpose is to fetch the name/price/img and permalink of the 8 most recent products in my WooCommerce and insert theses values into my code so that when a new product is added, the code update automatically... The only problem? I suspect that I will have to use Javascript or PHP but I know absolutely nothing about these 2...
I don't know how to do...
HTML is not a processing language, it is only a content language. If a website is a house, HTML is the walls, doors, windows, floors. CSS is the wallpaper, the paint, the decor, etc. Javascript (amongst others) is the electricity that runs through the house, making the fridge actually cold, turning on the lights, adding heat or air conditioning. In this metaphor, HTML's walls and floors are the text, images, and links on a website. CSS's decor is the coloring, font, placement of those texts and images. Javascript is what makes stuff happen to those texts and images, whether it's adding a function to a button to make it dance when it's clicked, or sending a message to an inbox when a contact form is filled out.
It would take me a long, long time to write the code you need (not necessarily because of the complexity, I'm just slow at this lol), but what I can tell you is that there are hundreds of Wordpress plugins that will do exactly what you want it to do, and in fact i'm 90% sure that whichever WP plugin you're using for your woocommerce site already has a function for that. If you can provide information about what plugin you're using then I can direct you on how to find that function!

Stopping other code from displaying with noscript?

I want to block people using my site without JavaScript as it will just cause problems as most of my website is coded in JavaScript, and relies on it for validation, ajax, and lots more.
I've learnt by adding <noscript> you can display a message to those who don't have javascript enabled, is there a way to stop it displaying the rest of the page, and only the noscript? Otherwhys it doesn't really have any use...
You can add a banner of varying size with a high z-index, like this:
<noscript style="position:fixed;left:0;right:0;top:0;height:20vh;
background:#fff;z-index:100000">
Please <a href="https://www.enable-javascript.com/" target="_blank" rel="noopener">
enable JavaScript</a>.
</noscript>
Adapt the wording and design to the style of your website.
If your website is really completely unusable without JavaScript, set height to 100vh (or bottom:0) to cover the whole screen.

Hide an element loaded from external url via widget

I'm setting up a website for my brother in-law. Been using a few services that are pretty inescapable in his industry. I could vent right now about them -- but I won't.
I'd like to remove the "Powered by" logo that appears on the schedule and the links:
This is a link to the site: http://goo.gl/lHv7dF (using a shortener in case I have to remove it for some reason).
I had found this question previously asked on stack-flow in regards to the same conundrum. It has some dead links, and sort of comes in the middle, and relates to code found on a defunct webpage. Hide an element loaded from external url
I want to point out that these plugins aren't free at all. They're amazingly pricey. It's kind of gross that the logo remains.
I appreciate your help!
TL;DR: Need to stop a specific element from displaying on a WP plugin.
I do not give my opinion on the fact of hiding the logo or not, that's your business, but be sure you have the right.
You should add this CSS rule in your style.css file (or into your WP template settings page if there is a field like "write your own css here") :
.hc_footer img { display:none; }
The rule hides all the image elements which are on the footer of the timetable. Currently there is only the "powered-by" logo so it's OK.

Simple onmouseover not working on eBay auction page?

I have created a background which changes onmouseover of "test image". This works on a normal hosted account at http://zabb.co.uk/full_page_ebay_table_working.html but not when placed within an eBay auction http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=160653524585#ht_802wt_1398 (scroll down required).
Is there a way to fix this so that it works in eBay please? Thanks very much! Regards,
Paul
I'm not sure to what extent eBay allows javascript, but I would have thought that you could achieve something with a CSS hover pseudo.
You could do the following, which would cause a background-image change on hover.
<style type="text/css">
table#bigPic { background: url(http://images.worldgallery.co.uk/i/prints/rw/lg/6/0/Derek-Hare-Sunset-Over-the-Sea-60196.jpg);
table#bigPic:hover { background: url(http://josefsipek.net/docs/s390-linux/hercules-s390/ssh-dasd1.png); }
</style>
For security reasons, it is utterly impossible to use Javascript in an eBay page.

Categories