I have a question..I need to add an image when a push on the print button...For example of the top of the page I want to insert an image:
Print button:
<li>
<a id="myLink" href="#" onclick="window.print();return false;">Print</a>
</li>
The print css:
#social-bar,#footer-copyright,#modal-reported,#modal-voted,#block- user-container,#thevideoplayer
{
display:none;
}
Now,how I can to add the logo of company on the top?Help please
Add image in page. hide for screen and show for print.
#media print {
.printlogo{ // add printlogo as class for logo image
display: block;
}
}
#media screen{
.printlogo{
display: none;
}
}
In your print.css, make sure the logo container has display: block or is otherwise viewable.
Related
How to make a collapsible navbar if the screen is smaller ?
My code looks like this:
<header class="header">
<a href="#" class="logo">
<img src="images/logo.png" alt="">
</a>
<nav class="navbar">
<div class="cart">
Strona główna
Sklep
<a href="cart.html">
<ion-icon name="basket"></ion-icon>Koszyk<span>0 </span>
</a>
</div>
</nav>
</header>
First, you will need to add the components that implement a disclosure pattern, i.e. the burger button.
And don’t forget to provide a helpful alt Text for your logo, usually the name visible inside the Logo
<header class="header">
<a href="#" class="logo">
<img src="images/logo.png" alt="ACME">
</a>
<nav class="navbar">
<button class="navtoggle" aria-expanded="false" aria-label="Menu"><ion-icon name="menu-outline"></ion-icon></button>
<div class="cart" class="cart--hidden">
…
If you don’t want to use a <button>, you’ll need to apply role=button and make sure that the element is focusable by means of keyboard as well, maybe by tabindex=0.
Then, via CSS Media Queries you can control on which viewport sizes you want to allow users to toggle the menu open and closed.
If you apply Mobile First coding, your basic CSS will be the smallest version, and then min-width queries add layouts for bigger screens. 900px is just an example, you might want to determine that breakpoint depending on the size of your menu.
.cart--hidden { display: none; }
#media screen and (min-width: 900px) {
.navtoggle { display: none; }
.cart--hidden { display: block };
}
Finally, you’ll need to bind to the click event to change the toggle-status in JavaScript.
const toggle = document.querySelector('.navtoggle');
const cart = document.querySelector('.cart');
toggle.addEventListener('click', () => {
if (toggle.ariaExpanded === "true") {
toggle.ariaExpanded = "false";
cart.classList.add('cart--hidden');
} else {
toggle.ariaExpanded = "true";
cart.classList.remove('cart--hidden');
}
});
.cart--hidden { display: none; }
#media screen and (min-width: 900px) {
.navtoggle { display: none; }
.cart--hidden { display: block; }
}
<header class="header">
<a href="#" class="logo">
<img src="images/logo.png" alt="ACME">
</a>
<nav class="navbar">
<button class="navtoggle" aria-expanded="false">Menu</button>
<div class="cart cart--hidden">
Strona główna
Sklep
<a href="cart.html">
<ion-icon name="basket"></ion-icon>Koszyk<span>0 </span>
</a>
</div>
</nav>
Beware again, that if you don’t use a <button> for the toggle, you will need to bind keydown handlers as well. Browsers do that by default for certain interactive elements.
You not really clear as to what you want to do. So it depends on what you are trying to accomplish. Maybe this will help get put you in the right direction:
CSS Files
//Media Query to run block of CSS code when viewport is at set width
//Mobile
#media screen and (max-width: 768px) {
// Makes it disappear
nav {
display: none;
}
.some-class {
render hamburger menu maybe...
display: block;
}
//Tablet
#media(max-width: 1024px) and (min-width: 768px) {
nav {
display: block;
}
.some-class {
display: hidden;
}
}
I would recommend looking into some documentation. I have found W3 schools is a good place to look for easy reference.
W3 Schools Media Query
the end goal is for my navigation to look just like this:
<div class="l-region l-region--navigation">
<div data-mediasize="959" class="responsive-menus responsive-menus-0-0 absolute"><span class="toggler">☰ Menu</span><div id="block-superfish-1" class="block block--superfish block--superfish-1 responsive-menus-simple">
<div class="block__content">
<ul id="superfish-1" class="menu sf-menu sf-main-menu sf-horizontal sf-style-none sf-total-items-8 sf-parent-items-6 sf-single-items-2 superfish-processed sf-js-enabled sf-shadow"><li id="menu-2237-1" class="first odd sf-item-1 sf-depth-1 sf-no-children">Events</li>
link to code: https://jsfiddle.net/4b17u2fs/1/
You have to use different #media queries for this.
With those media queries, you will be able to make your burger button visible or not. Then it's some javascript for the event when you click on the button.
You can do something like this :
#media screen and (max-width: 1100px) {
.burger-button {
display: inline-block;
}
}
.burger-button {
display: none;
}
This will only make your .burger-button visible on screens smaller than 1100px.
You just have to adjust things but this is the way of doing.
<p>Content1
<a class="button" onClick="toggleText()">Read More</a>
</p>
<p class="text2">
Hiding content2[ maybe by toggle so even the white space is gone]
<p>
By clicking the anchor link= read more, It toggles Content2.
For sure best way is CSS media query, but if you want to do that on js side you can add an event listener to window resize. Base on event prop you can check size of the window like this
window.addEventListener('resize', (e) => {
if (e.target.innerWidth < 980) {
// do stuff
}
});
#media only screen and (min-width : .....) and (max-width : 980px) {
.text2 {
display: none;
}
}
I'm building a web page to learn about responsive web development and have run into a problem with my links. When the page width is small I would like to add hyperlinks to my images however when it becomes large I would like to take them off the images and put them on another element. Is there a way to do this with HTML, CSS and/or JavaScript?
For more context please take a look at this slideshow where I have added a breakpoint at screen width 450px. When the screen is wider, the hyperlink is on the "Read More" button, however I would like it to be on the image when the "Read More" button disappears.
If you wanted to use jQuery, you could do something like this:
Demo
JS:
$(document).ready(function() {
moveLink();
});
$(window).resize(function() {
moveLink();
});
function moveLink() {
if ($(window).width() >= 450) {
$("#myImage").unwrap();
$("#myText").wrap('<a href="https://www.stackoverflow.com">').show();
} else {
$("#myText").unwrap().hide();
$("#myImage").wrap('<a id="myLink" href="https://www.stackoverflow.com"></a>');
}
}
HTML:
<img id="myImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<br>
<span id="myText">Read More</span>
Example using media queries (minimize the window to be less than 600px, you will see the link, otherwise you will see the image):
https://jsfiddle.net/89ptv9mt/
#media (max-width: 600px) {
.logo {
display : none;
}
.altText {
display : block;
}
}
#media (min-width: 601px) {
.logo{
display : block;
}
.altText {
display : none;
}
}
<img class="logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MDN">
MDN
I want to change the image button from green to yellow on rollover.
Here is my CSS code
a#try-it-button {
width:273px;
height:47px;
margin-left:25px;
margin-top:372px;
background:url(../image/try-it-green.png);
}
a#try-it-button:hover {
width:273px;
height:47px;
margin-left:25px;
margin-top:372px;
background:url(../image/try-it-orange.png);
}
a.alt { display: none; }
My html code
<div id="y-moringa">
<a id="try-it-button" href="#"><span class="alt"></span></a>
</div>
Thanks in advance.
Add float: left or display: inline-block or display: block to a#try-it-button.
Which one of those you want really depends on the layout you desire.
You don't need to duplicate all the properties on :hover (except for the new background).
What you should actually be doing here is using "CSS Sprites" (there are many benefits), and adjusting the background-position on :hover.
Untested, but give this a shot:
a#try-it-button {
width:273px;
height:47px;
margin-left:25px;
margin-top:372px;
display:block; // <-- **I added this**
background:url(../image/try-it-green.png);
}
a#try-it-button:hover {
background:url(../image/try-it-orange.png);
}