Develop Reference

Prepare HTML for PDF Print with multiple Pages without Cutting Images/Text

We use jsPDF + html2canvas Javascript libraries to export HTML to PDF without the need for Native Browser support. Some of our big corporate customers use browsers which do not have Print to PDF functionality.
The current solution works pretty well, it creates a container DIV element with "overflow:hidden" and positions the HTML that is being exported such that only 1 page is visible, since we know exactly how many pixels wide/tall the page should be, then we use the library to export the view at that moment, then reposition things for the next page by scrolling down (actually we use a negative top margin, since html2canvas doesn't respect the "scrollTop" property).
The problem, though, is that this solution does not handle well at the borders of the pages. Images and text will get cut in the middle, and then continues on the next page. The end result looks weird, but at least there is nothing missing.
Is there a way to prepare this HTML in such a way that it will behave nicely at the borders? I am given an HTML element that when placed into an element of pageWidth pixels wide needs to be cut into pieces of exactly pageHeight pixels tall. I can modify the HTML any way that I want, b
I feel like there should be some solution, since I've noticed using the native PDF Print on Chrome solves this somehow because the output looks fine there - it somehow moves images around so it doesn't get cut off.
Here is a sample JS that I created that demonstrates how my code will create multiple pages.
http://jsfiddle.net/56u9Lxgt/

Basically, you have to check the actual page size always before adding new content.
In this link the answer:
jsPDF multi page PDF with HTML renderer

How to integrate custom skins into a jQuery webpage

Edit:
tl;dr What I have is a .png file of a horizontal bar and a .png file of a square button. I want to be able to add both images to a webpage and be able to slide the button along the rectangle. I know that it is possible to make range sliders in better ways but using the .png files is a hard requirement.
I have been tasked with taking an image of a range slider, adding it to a webpage, and make the slider interactive/draggable. I know that jQuery has its own sliders (https://jqueryui.com/slider/#multiple-vertical) but this does not seem to apply if you want to use an image of the range slider instead.
Example Image:
(source: dcrazed.com)
How can this be implemented? All the tutorials I see make the slider out of HTML/CSS/JS elements while I have separate images of the slider and draggable button.
FYI, the reason we're using an image is that it looks better than the standard sliders jQuery provides.

It may help if you search for "Form Range Input" or "RangeSlider JS" instead of slider to find a tutorial.
However I don't see any reason why this can't be accomplished more easily and more cleanly strictly through JS and CSS.
If you're having trouble visualising, try breaking your design into parts like so and save yourself the hassle of trying to make an image based design responsive. (Like we all have struggled with previously)
The slider knob itself is a rounded square with three squares inside it.
The slider bar is a rounded rectangle with another three squares placed inside it.
The information box is a div with text and a CSS triangle affixed to it.
The ticks themselves are trickier and will need to be added and removed dynamically with JS depending on their resolution, but their visual details only really need basic styling
If you still feel the need to use images and break the responsiveness of your website then have a look through some Codepens and see what others have done with similar requirements.

Can I make html tags work based on screen sizes?

I was looking at some of my code in Safari when I resized the page and it didn't look great. I need to restyle it, and using the media tag I added another style sheet. It looks better now but there are still some aspects of the page that don't look good that I could easily fix with html. When I add the html, the page starts to look better but then when I make the browser full page is look weird. Is there a way to make an html tag work based on the screen size? I am looking for something like the "media" tag used when linking a style sheet. I also have JavaScript and jQuery on my site if that helps, but that's it.

you can use this
#media
example this will only on width of 500px or higher
#media (min-width:500px)
{
/*Class name*/
{
/*properties*/
}
}
similarly you can specify max width but to save time you should use popular framework bootstrap compatible with jQuery

if you want that html tag work based on the screen size then you need to work on responsive css or you can you any framework like bootstrap or foundation many more available for html and css where u can get visibilities classes for you html

Soudcloud iframe widget customization

I am trying to adjust the soundcloud embed widget but am having some difficulty. I would like to do two things:
1) Override the CSS for the div.sc-truncate ( overflow: hidden; white-space: nowrap ) which contains the text "Wanderlust Basement Tapes" but will currently not display the entire text due to the aforementioned text. I have added my own style to the site stylesheet with !important but they seem to have no effect which I think has to do with the widget being an iframe.
2) Force the widget layout proportions to show full song list by default. Normally this requires scrolling to the bottom of the list. Ex:
vs
I'm guessing that the proportions change after scrolling via some javascript but all the javascript being used by the widget is minified as far as I can tell and is thus difficult to analyze and/or modify. For this reason I am hoping that a developer of the widget will be able to recommend a possible method.
Thanks!

It's not possible to modify the styles of any page in an iframe from the containing document (including the SoundCloud widget).
Having it spread over two lines does look pretty fine in this case, but obviously title lengths of all sizes also need to be considered. I will pass on the request to investigate removing the truncation.

Questions about Viewports and large image navigation

Okay, so I'm working on a project using JavaScript and the basic UI we want to be a very large background image, and when you select the navigation menu items it propels you to a section on that large image.
I've tried finding documentation on Viewports and trying to figure out how Map applications function but have had very very minimal success.
It would basically be a Google map without the user being able to slide it. How in the world would I begin to approach this?

You can set the background-image property in CSS and use javascript to change the background-position.