Develop Reference

Svelte print contents of a div element

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.)

Single page website with jQuery - Content in JS or HTML

I'm just picking up JS & jQuery and consider myself quite capable with HTML/CSS. I'm in the middle of building a single page front-end only website. I've got the layout nailed down with Bootstrap and now I'm just trying to figure out some of the functionality. My scenario is as follows:
There are 4 <div>s with text and an image in each of the 4 <div>s; and there is a <div> with class #content below it. There is a .on('click') listener for each of the #c1-4 divs and when the user clicks on a particular div, the #content div will change accordingly.
<div id="#c1" class="active-div">
<p>Text Here</p>
<img src="image.jpg">
</div>
<div id="#c2">
<p>Text 2 Here</p>
<img src="image2.jpg">
</div>
<div id="#c3">
<p>Text 3 Here</p>
<img src="image3.jpg">
</div>
<div id="#c4">
<p>Text 4 Here</p>
<img src="image4.jpg">
</div>
<div id="#content">
<!-- Content of the selected div goes here -->
</div>
By default, #c1 <div> is selected. The content that goes in to #content is mostly text but some icons and images too, with appropriate styling.
The Question: What is the best way to store & load content into the #content div? Based on my knowledge so far I believe the options are:
Hard-coding it into the JS and using .html() to set the content; although this would add quite a bit of HTML to the JS.
Hard-coding 4 different divs related to each of the 4 #c IDs and using .show() and .hide() accordingly.
Using .load() to load the content from another HTML document. However, I'm not sure how styling would be handled and how this will affect the display of the #content div.
I would also like to know the pros and cons of each of the above approaches and which one would be more suitable for future maintenance (e.g. adding a fifth, sixth #c numbered div to select & load content for).

In real world developers consider backend data to replace / append content based on user's clicks and it is just second thing how exactly you append / prepend / html or load your content to your div element. Not sure how you are going to hardcode different content according to the clicked button, I think in your case #2 & #3 should do the trick.
There is append / prepend actions you can use (they are self-explanatory I guess, but might be useful in some cases).
As I mentioned initially in ideal work you will do queries to your backend endpoints (databases, API etc..) and fetch content from there. Once done, you just style it accordingly using those divs and css (either inline or CSS table) things. Focus on overall construction!

There are a lot of ways to do this and a lot of JS frameworks out there that do it differently, but all of your options are appropriate in my opinion, especially given that you're using jQuery. I'll just talk a bit about your three options:
You can hard-code it into your JS, but you can also place the content in your HTML in a <script> tag and load it as a JavaScript string in jQuery, like they do for Underscore templates.
<script type="text/template" id="div-1">
<span>Hey, this is some content</span>
</script>
Then later in your JavaScript, just do $('#div-1').html() to get the contents of it, and you can stick that in your content div.
This option is also perfectly acceptable.
As long as you have all your css already applied to the document, dynamically changing the DOM won't affect its ability to apply styles. Just make sure you have all the rules in a stylesheet that is already loaded.

Expanding on my comment, here is how you could do it with hidden content divs and replacing html using .html()
$(function() {
var content = $('.active-div .content').html();
$('#content').html(content);
$('.item').click(function() {
$('.item').removeClass('active-div');
$(this).addClass('active-div');
content = $('.active-div .content').html();
$('#content').html(content);
});
});
.item {
cursor: pointer;
display:inline-block;
padding-right:10px;
}
.content {
display: none;
}
#content {
background: #000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item active-div" id="#c1">
<p>Text Here</p>
<img src="image.jpg">
<div class="content">Sample content 1</div>
</div>
<div class="item" id="#c2">
<p>Text 2 Here</p>
<img src="image2.jpg">
<div class="content">Sample content 2</div>
</div>
<div class="item" id="#c3">
<p>Text 3 Here</p>
<img src="image3.jpg">
<div class="content">Sample content 3</div>
</div>
<div class="item" id="#c4">
<p>Text 4 Here</p>
<img src="image4.jpg">
<div class="content">Sample content 4</div>
</div>
<div id="content">
<!-- Content of the selected div goes here -->
</div>

Different style sheets for different parent pages

I am struggling with tweaking my Angular JS application.
There is the whole application where in the end I'd like to use my app.css file as a style sheet. So each state like:
domain/#/articles
domain/#/articles/1
domain/#/users
domain/#/users/1
will use this file.
However I do have a cms section in my application (i.e. domain/#/cms/articles and I'd like to use completely different styles there (nothing in common with app.css). Is there anything I could do to easily load cms.css for selected states and do NOT load app.css there?
My initial idea was to add two style sheets in my index.html file with either ng-if or ng-show for each but that's definitely not a good approach (most likely it wouldn't even work).

What about assigning a top-level class to each page, and then nesting the styles that are unique to that page within it? This is made even simpler if you're using a CSS preprocessor like LESS or SASS.
For example, you'd have something like this:
<div class='main-page' ng-controller='main'>
<p>Some text</p>
<p>Some more text</p>
</div>
<div class='cms-page' ng-controller='cms'>
<p>Some CMS text</p>
<p>Some more CMS text</p>
</div>
And then in your CSS:
.main-page {
//main styles here
background-color: black;
p {
color: white;
}
}
.cms-page {
//cms styles here
background-color: red;
p {
color: blue;
}
}
Extrapolate that idea as needed, but now you don't need to worry about reusing class names or having styles on one page conflict with styles on another, as everything is nested safely in its page class.
For global styles, of course, you just leave them out of the top-level page classes.

apply colour change to only some tags

If I am using a <h3> tag and apply css
h3 {
color:White;
}
changes the colour of all the header 3 text to white colour.
I only want to apply this to certain <h3> tags though among my many.
How can I do this please?

Give them a class:
.white-header {
color: white;
}
And in your html:
<h3 class='white-header'>I m white</h3>
JsFiddle

You can use a common class on them and use css for that.
I only want to apply this to certain tags though among my many.
Then you target parent element and apply css for that like below:
<h3>heading</h3>
<div class="foo">
<h3>some heading</h3>
<p>some paragraph</p>
</div>
h3{
color: red;
}
.foo h3{/*applied for some heading*/
color: white;
}

CSS is the way to go, but since the question is tagged javascript here is a JS solution using querySelector() to style select <h3> tags:
document.querySelector("div.someClass h3").style.color = "#FFF";
Edit: #Kitler just edited out the javascript tag from the question. This answer is for the original question. If the OP leaves it off, then I will quietly delete this. Hold off before downvoting.

multiple elements with the same id

i've heard using multiple id attributes is very bad practice but what confuses me is what if the elements are nested like this...
<div id="slideshow1" class="slideshow">
<div id="left" class="slideshow-arrow"></div>
<div id="right" class="slideshow-arrow"></div>
</div>
<div id="slideshow2" class="slideshow">
<div id="left" class="slideshow-arrow"></div>
<div id="right" class="slideshow-arrow"></div>
</div>
i've made an example with js here and everything seems to work fine..
http://jsfiddle.net/6YPsX/
if they were nested within the same element then unique id's would make sense but do ID's really need to be unique to the whole document?

An ID is more than just a way of finding an element, there are other things associated with an ID. The following link should be helpful and provide a greater insight into this. Here are the main points:
The id attribute has several roles in HTML:
As a style sheet selector. As a target anchor for hypertext links.
As a means to reference a particular element from a script.
As the name of a declared OBJECT element.
For general purpose processing by user
agents (e.g. for identifying fields when extracting data from HTML
pages into a database, translating HTML documents into other formats,
etc.).
link to w3 site

You can have multiple classes on the same element
<div id="slideshow1" class="slideshow">
<div class="slideshow-arrow left"></div>
<div class="slideshow-arrow right"></div>
</div>
CSS
.slideshow-arrow {
background: none top left no-repeat;
width: 20px;
height: 20px;
}
.slideshow-arrow.left {
background-image: url('...');
}
.slideshow-arrow.right {
background-image: url('...');
}

It is a bad practice it won't pass W3C validation and it get's even worse when you try to implement JavaScript. Just use a class name instead or give them different id names.