Svelte print contents of a div element - javascript

Hi I'm using svelte for a side project i am doing and i want to print a receipt and not the entire page. is there a way to do it? i saw some other posts talking about how to print a div element using plain JavaScript but this doesn't work in svelte.
example code i want to print only the element with the class printable
<div class="printable">
<h1>hello world</h1>
</div>
<div class="navbar">
home
next
profile
</div>

You can use a #media query or use events (beforeprint/afterprint) and local state to show/hide things.
In terms of targeting elements, it is easier if you invert the logic and mark elements to remove when printing. It is easy to hide all elements that do not have the class, but that would by default include the h1 inside the printable element.
For example:
<div>
<h1>hello world</h1>
</div>
<div class="navbar not-printable">
home
next
profile
</div>
<style>
#media print {
.not-printable { display: none; }
}
</style>
(If elements are spread over multiple files, you might want to move this to a global style sheet because of the component style scoping.)

Related

Link button to heading in same page

I'm trying to link the button to the heading of the different sections on the same page but I couldn't figure out how to use.i can use a link from one class to another but how to link on the same class with a specific word. what I have done is
<Button className="sec-btn"> Get Started </Button>
I want when users click Get started button then link that to the "Antsy service" title on the same page.
<h1 className="heading-1">Antsy services</h1>
What I understand from this question is you have a href anchor tag element that when clicked, you want to scroll down the page to a different element.
You can use IDs as a form of linking between elements on the same page.
Solution
Simply give the element you want to scroll to an ID and then in the anchor tag you can provide a link to it via href.
<a href="#test">
<button> click me </button>
</a>
<div class="space"></div>
<div id="test">
<p> hello </p>
</div>
Here is a codepen for it so it's easier to see the effect visibly.
https://codepen.io/shanecreedon/pen/poJGovK
What you are looking for is anchor links.
How to create and use them:
add id="example" to some element on the page
add Scroll me to example element on top of your page
click and see what will happen
You need to use the id selector syntax like this. Heading should have an id selector...
<h1 id="heading-1">Antsy services</h1>
Then you can link to the section of the page like this:
Get Started
I see you're trying to build a Single Page Site with sections. For this, you have to use ID to all the Headers that you are about to navigate to.
Try this,
<html>
<head>
<title>Example</title>
<style>
h1{
height : 100vh;
background: skyblue;
}
h2{
height: 100vh;
background: #c0c0c0;
}
h3{
height: 100vh;
background: #a0faf9;
}
</style>
</head>
<body>
Home
Services
Contact
<h1 id="home">Home Section</h1>
<h2 id="services">Services Section</h1>
<h3 id="contact">Contact Section</h1>
</body>
</html>

Can elements be styled with external CSS

An external CSS file is applied globally to the referencing HTML page. Is it possible to limit the scope.
I am aware that I can do .myCssClass etc but for this project, I'm going to need 2 very different styles in one page. Consider 2 divs, where one uses CSS stylesheet 1 and the other uses stylesheet 2 (and there will also be the orthodox CSS for the site).
The style sheets will also be used else where, so I can't edit the CSS. It would be idea to share the external CSS by element. Something like
<div stylesheet="../style.css">content 1</div>
<div stylesheet="../style2.css">content 2</div>
Is this possible?
You can use scoped attribute, but unfortunately it is supported only by Firefox. So, the ids and classes is the best, accepted, approved and common solution.
<div>
<style scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>Heading</h1>
<p>hello world! I'm of blue color!</p>
</div>
<p>I'm out of the scope, so I'm of the black color :(</p>
You must have then 2 different classes for them, one class from style.css and other from style2.css, as they'll overwrite one over the other if you only use the 'div' selector, if you can choose a specific class from each style.css, I think that would be wiser than complicating your life, or try the solution that Paweł posted
As far I know isn't possibile, but you can create "zones" using CSS selectors, in example, take a look here:
<div class="content">
<div class="myElement">
</div>
</div>
<div class="footer">
<div class="myElement"></div>
</div>
with this selector in css:
.content .myElement{
height:50px;
width:50px;
background-color:blue;
}
only the div with "myElement" class wrapped in the div with the "content" class will be affected by this rule.
here's a fiddle showing this case:
https://jsfiddle.net/fn7ohw75/

In page (hash) link, get to the first visible element

I have a partial view (handlebars html template) that has a piece for html for desktop and one piece of mobile. I just hide it accordingly using different css classes.
<div class='hideOnMobile showOnDesktop'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Mobile presentations -->
</div>
The important pieces of my css is basically hiding and showing the elements using media queries:
#media only screen and (min-width: 420px) {
.showOnMobile { display: block; }
.hideOnMobile { display: none; }
}
#media only screen and (min-width: 1050px) {
.showOnDesktop { display: block; }
.hideOnDesktop { display: none; }
}
CSS is attached for reference. The css is actually working as expected. The problem is the following:
When the browser receives the url for that specific page http://example.org/page.html#manuals, I would like the document to navigate directly to the first visible <a> element. No matter what, I cannot make the deep link to work with the first visible element. I've read that there is some kind of limitations, but I wanted to know if there is a work around, or if the only option that I have is to emulate the deep link using javascript (that I'm trying to avoid). Thanks a lot
Maybe the markup can be altered?
<a name='manuals' id="manuals" href='#manuals'>Manuals</a>
<div class='hideOnMobile showOnDesktop'>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<!-- Extra html for Mobile presentations -->
</div>
This way, the target of the hash (#manuals) is always visible regardless of the environment. This also makes it a bit more maintainable since you have less duplication.

Hide specific div without css

If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';

Image not display correctly inside <div style="display:none;">

In a Web Page, I'm trying to get the coords of an adress given by the user.
I'm trying to do something like: http://www.bufa.es/google-maps-latitud-longitud/
But I have a problem. The map is placed inside a div with this structure:
<div id="divgeolocalizacion" style="display:none;">
...
<div style="width:100%; clear:both;">
...
<div style="float:left; width:57%; margin-right:3%;">
<div id="map">
...
<div>
<div>
<div>
<div>
The user has a button on the page, which executes some javascript code. This code only changes the div display style to
"block". The problem is that the map is very very small. However, when I open developers's tools with F12, the image changes its size.
Why i'm getting this strange behaviour? Before you ask, I didn't have any "console.log()" on my javascript code.
Pd: When div's display style is initially set to "block" all works perfectly.
I found this solution by vaelico here: Google Maps Display:None Problem
To solve the problem is necessary to add this line in the javascript after changing the div's display style:
google.maps.event.trigger(map, "resize");
none and block are values of the display property, so you should have either
display: none;
or
display: block;
in your tag's style attribute, not the values alone.

Categories

Resources