We Keep Coding

Can I use javascript to place one element on different places, one for mobile and one for desktop?

I am adding an element in the dom using javascript. I have added an using insertBefore() to place it where I want it on the mobile view. But in desktop it is supposed to be placed on a different space on the website. How can i solve this?
Just using CSS is not an option due to already existing elements that i cant't move.
var priceWrapper = document.querySelector('.price-info-wrap')
var mainContainer = document.querySelector('.price-info')
var addUrgency = document.getElementById('urgency')
priceWrapper.insertBefore(addUrgency, mainContainer)
The code provided is how I have placed "addUrgency" witch is the div I need to put elsewhere on desktop.

You can do it, but it's a bad idea.
Lay out your elements starting with smallest screen width you need, then work outwards from there using CSS Media queries to adjust the layout at specific screen widths as and when you need to.
In this case, if you can't do it any other way you could have both elements where you like them and then show/hide depending on the viewport width. Something like:
#media (min-width:800px) {
//your non-mobile styles and classes go here
.desktop-element{
display: inline-block;
}
.mobile-element{
display:none;
}
}

You could use navigator.userAgent and determine if the browser is a mobile browser. There is also an question with really good answeres on doing that on StackOverflow: Detecting a mobile browser
Another option is to check the viewport-size with javascript. Which can be a better solution in the case you have css-rules in place that are responsive to the viewport-size , like: #media (width):
let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
After that it is a simple if-else to decide where to place your element.

You can use the onresize event. But, I have to note, that having two identical elements (perhaps using clone() to copy #addUrgency) in the DOM on their right places and display/not display them using CSS media queries instead of using Javascript to re-lay elements every time the viewport is resized is a better solution. However, to answer your question here is the most straightforward approach using your code. It also worth to note, that resize event can fire pretty fast, so you probably will want to throttle the function relay (answers are on StackOverflow).
function relay(){
var addUrgency = document.getElementById('urgency');
if(`mobile view`){ //here goes a condition to determine what view you have.
var priceWrapper = document.querySelector('.price-info-wrap');
var mainContainer = document.querySelector('.price-info');
priceWrapper.insertBefore(addUrgency, mainContainer);
}else{
// Insert where you want it on desktop view
}
}
window.onload = function() {
relay();
document.body.addEventListener("resize", relay);
};

You could do this using JavaScript but I wouldn't recommend this approach as I believe this is achievable in most cases with plain HTML and CSS. One method would be using display: grid and placing the elements in the desired rows/columns on mobile (If you are of course utilizing a mobile-first approach) and then redistributing them on larger screens with media queries. Additionally, you could of course make use of position: absolute whenever this strategy does not completely do the job.
Here is a great article, in case you are not completely familiar with display: grid.

Automatic CSS Height of Div

quick question. I would like to add a JS program to control the height of one of my bootstrap divs (it's a decorative border on both sides of the page - see picture)
I don't want to have to set the height manually (i.e 2000px;)
I was trying something like this, but I couldn't manage it
css("max-height", $(window).height());
except this just fills up the screen, anyway of filling the body?
Here is the site - davidcodes.co.uk/vintarnBurmese/index.html –
David

If you are targeting modern browsers, or using modernizr, then using 'vh' units generally works better than %. When trying to size something relative to the screen height, then percentage units require that the heights of the tree going from your element up through its parents to the body all have predetermined heights. But the 'vh' units exactly capture what you want.
.yourdiv { height:100vh; }

Replace window with 'body':
$el.css('height', $('body').height());

This worked in the end (though Safari doesn't like it, FF and Chrome find it ok)
<script>
var mainSectionHeight = $(".mainSection").height();
$(".sideBar").height(mainSectionHeight + 100 + "px");
</script>

Javascript - Change height in <div style> depending on the height of image(s) in the div or completely remove it?

Well as the title says.
Right now each signature (on a forum) div got:
<div style='height:Xpx;overflow:scroll'> (X = depends on each signature due to the image heights shifting)
And I want to change the height so I don't have to scroll through each signature, but showing all images directly.
Here is the right part of a signature:
http://puu.sh/4xOW7.jpg (couldn't use the website-image-feature due to not having 10 rep)
And I tested around and managed to make it like this:
http://puu.sh/4xPar.jpg (it's much more further down)
and like this..
http://puu.sh/4xPco.jpg (couldn't post more than 2 links -_-)
I also tried to remove the overflow:scroll, change it, and so on. (also tried removing height: etc)
But I just can't get it to simply remove the scrollbar - making all images show normally. I'd really appreciate help! :)

instead of style="height:250px;overflow: auto;"
you need style="display:inline;"

Dealing with scroll bars and jquery .width() method

jQuery's .width() method doesn't seem to account for scroll bars. This is problematic for me, since I'd like to set the width of some children to equal the width of their parent. I used jQuery similar to the following:
$('#contentDiv').width($('#containerDiv').width())
In this example, #contentDiv is the element I'd like to size, and I want to set it to have the width of #containerDiv, which is its parent element. My problem is that this cuts off the side of #contentDiv, as seen in this fiddle.
In my actual code, I have several elements that I'm sizing with jQuery, which all need to fit in the scrollable div, so just setting the css of #contentDiv to 100% is not an option. What's the best way of dealing with scroll bar widths of divs in jQuery?

The best solution I found while working around this solution is this:
http://chris-spittles.co.uk/?p=531
jQuery is all powerful and everything but sometimes a small dash of native JS is all you need to render pixel perfect pages... I hope you will find this solution helpful!

UPDATED:
None of the jQuery width-finding methods account for the scroll bar. In my original example, using .innerWidth(true) LOOKS like it works, but only because it returns and object, which causes width to fail and the inner contents size themselves to fit in the available space, because the example wasn't very good. However, it's possible to write a function to compute the available space in a div with a scroll bar in it, which can then be used to position the contents as you wish.
To write that function, I took advantage of the fact that, when a div is appended to a div with a scroll bar in it, it takes up the full available width (i.e. the inner width of the parent minus the width of the scroll bar).
The function looks like this:
function noScrollWidth(div){
var measureDiv = $('<div id="measureDiv">');
div.append(measureDiv);
var width = measureDiv.outerWidth();
measureDiv.remove();
return width
};
I then use this to size my content div:
$('#contentDiv').width(noScrollWidth($('#containerDiv')));
Working fiddle.

Try this:
$('#contentDiv').width($('#containerDiv')[0].clientWidth)
For more information about that solution, see this StackOverflow answer.

Another approach I'd try is setting both elements' box-sizing property to 'border-box', and see whether setting your contentDiv's width to 100% then works the way you want.
Now that fewer projects worry about crufty old browsers anymore, 'border-box' can make things easier to work with. Be sure to test multiple browsers on multiple platforms, though, because I'm not sure they all handle scrollbars the same way.

I need help to disable shadowbox from resizing

This overlay seems to be the only overlay plugin that works within my schools wonky template... but the problem is that when the browser is resized the shadowbox resizes too, clipping the contents inside. I want it so the box stats fixed and if the browser does get smaller the browser will have scrollbars.
I know it's been modified before, but i dont know where to start. I cant even find an unminified version of the .js file.
Thanks

Hey I was having this exact same issue - I found that you can force it to the height you want by putting this in the shadowbox.css file:
#sb-wrapper { height:560px !important; }
#sb-wrapper-inner { height:560px !important; }
And in your HTML markup, make sure you define the height and width in the rel attribute of the a tag:
Your Link
I don't know where to start either with the JavaScript file - CSS it is.

Look for the K.onWindowResize function in the last lines of the shadowbox.js script and modify it as follows:
K.onWindowResize=function(){
if(!doWindowResize){return}setSize();
var player=S.player, dims=setDimensions(player.height,player.width);
//edited by gabriel esquivel 11/15/10
//adjustWidth(dims.width,dims.left);
//adjustHeight(dims.innerHeight,dims.top);
animate(wrapper,"top",dims.top,0);
animate(wrapper,"left",dims.left,0);
if(player.onWindowResize){player.onWindowResize()}};

Assuming you're using the code found at http://www.shadowbox-js.com/, if you want the images to always be of a certain size (let's say a height of 600px for the purpose of this example), adding the following to your CSS should do it:
#sb-wrapper-inner { height:600px !important; }
If there's not a static height you can force them to, it's more difficult than I can figure out on my coffee break.

Just put this in the init
Shadowbox.init({
viewportPadding:-1000
});
Then the pading never gets to negative and so does't resize.