Develop Reference

JavaScript change background image on-click?

I'm trying to change the background of the body on my HTML doc using some basic JS functions. I have set the function to target a specific ID, and then the style.background tag, if it is the current background image, then set it to another one I specified, else keep the same image. I have tried changing the code countless times now, but still can't seem to get it to change the background. Any help with this would be appreciated.
HTML:
<div class="bg-image"
style="background-image: url('./img/frankie.jpg');
height: 100vh" id="bacgr"> <!--SETS BACKGROUND using id tag to change w/ JS-->
<main role="main" class="container d-flex justify-content-center">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
</div>
JS:
let myImage = document.getElementById('bacgr').style.backgroundImage; //have to target specific image(like an array ([0])), put inside div w/ id.
myImage.onclick = function() {
if(myImage === "url('./img/frankie.jpg')") {
myImage == "url('./img/jesus_mobile.jpg')";
} else {
myImage == "url('./img/frankie.jpg')";
}
}

Try this:
const el = document.getElementById('bacgr');
el.onclick = function() {
if(this.style.backgroundImage === "url('./img/frankie.jpg')") {
this.style.backgroundImage = "url('./img/jesus_mobile.jpg')";
} else {
this.style.backgroundImage = "url('./img/frankie.jpg')";
}
}
Here is the example

You are changing only the URL, but that will not be assigned back to the dom element.
const el = document.getElementById('bacgr');
let prev = 'url("https://images.unsplash.com/photo-1570215171323-4ec328f3f5fa")';
el.onclick = function() {
el.style.backgroundImage = prev === el.style.backgroundImage ? 'url("https://images.unsplash.com/photo-1583508915901-b5f84c1dcde1")' : prev;
}
<div class="bg-image" style="background-image: url('https://images.unsplash.com/photo-1570215171323-4ec328f3f5fa');
height: 100vh" id="bacgr">
<main role="main" class="container d-flex justify-content-center">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
</div>

Owl carousel 2 navigation controls are hidden and disabled

I am missing some really basic stuff here. I am setting nav and navText options according to docs, and I can see buttons content being changed in DevTools, but they keep being disabled and hidden. What am I missing? I am using v2.3.4. Browsed plenty of question, but could not find anything similar
<div class="owl-carousel quote-carousel">
<div class="quote-item" style="background-image: url('/images/landing/profile.png')">
<div class="quote-text">"Where are navigation controls??"</div>
<div class="quote-name">John Doe, Hampshire</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".owl-carousel").owlCarousel({
items: 1,
loop: true,
auto: true,
nav: true,
navText: ["<div>LEEEEFT</div>", "<div>RIIIIGHT</div>"]
});
});
</script>

Owl Carousel does not respect nav and navText when there is single item in container, but I had loop: true flag!! Thats why I expected it to work.
Code from sources:
Navigation.prototype.draw = function() {
var difference,
settings = this._core.settings,
disabled = this._core.items().length <= settings.items,
index = this._core.relative(this._core.current()),
loop = settings.loop || settings.rewind;
this._controls.$relative.toggleClass('disabled', !settings.nav || disabled);
if (settings.nav) {
this._controls.$previous.toggleClass('disabled', !loop && index <= this._core.minimum(true));
this._controls.$next.toggleClass('disabled', !loop && index >= this._core.maximum(true));
}
This line
disabled = this._core.items().length <= settings.items,
can be simplified to disabled = 1 <= 1 in my case.
So, in order to display "single" item in owl carousel and still show controls, I have to put at least two items in container
<div class="owl-carousel quote-carousel">
<div class="quote-item" style="background-image: url('/images/landing/profile.png')">
<div class="quote-text">"Where are navigation controls??"</div>
<div class="quote-name">John Doe, Hampshire</div>
</div>
<div class="quote-item" style="background-image: url('/images/landing/profile.png')">
<div class="quote-text">"Where are navigation controls??"</div>
<div class="quote-name">John Doe, Hampshire</div>
</div>
</div>

Creating a div slider in jquery

I am trying to make an image change when I click on a piece of text on a website that I am building.
At this moment I have created a class called device with one of them being device active as shown below:
<div class="col-md-3">
<div class="device active">
<img src="app/assets/images/mockup.png" alt="">
</div>
<div class="device">
<img src="app/assets/images/mockup.png" alt="">
</div>
<div class="device">
<img src="app/assets/images/mockup.png" alt="">
</div>
</div>
And then what i am currently trying to do is remove the class of active when I click on some text with the i.d of #search2. This is my whole jquery script so far:
$("#search2").click(function() {
var currentImage = $('.device.active');
var nextImage = currentImage.next();
currentImage.removeClass('active');
});
However this does not seem to remove the class of active and the image is still displayed? any ideas?

Your selection is done right and it is working for me (the active class is removed from that item). The problem must be somewhere else in your code.
Here is an alternative:
var activeDeviceIndex = 0;
$("#search2").click(function() {
var devicesContainer = $('.device');
$(devicesContainer[activeDeviceIndex]).removeClass('active');
activeDeviceIndex === devicesContainer.length - 1 ? activeDeviceIndex = 0 : activeDeviceIndex++;
$(devicesContainer[activeDeviceIndex]).addClass('active');
});
.device {
display: none;
}
.device.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="device active">
<p>Device 1</p>
</div>
<div class="device">
<p>Device 2</p>
</div>
<div class="device">
<p>Device 3</p>
</div>
</div>
<button id="search2">click</button>

Check on the following, the id on the button to click should be search2 and not #search2, may be just typo stuffs.
after that update your code as follows
/**
*#description - gets the next image to slide, if the last image is the current image, it will loop the sliding
*#param {Element} current - the currently active image
*#param {Boolean} islooped - boolean value indicating if a looping just started
*/
var nextImage = function(current, islooped) {
var next = islooped? current : current.nextSibling;
while(next && next.nodeName.toLowerCase() !== 'div') {
next = next.nextSibling;
}
next = next? next : nextImage(current.parentNode.firstChild, true);
return next;
};
$('#search2').bind('click', function(event) {
var current = $('.device.active').removeClass('active').get(0);
var next = nextImage(current, false);
$(next).addClass('active');
});

Equivalent of getElementById in Angular?

I'm moving some of my html/javascript pages over to AngularJS. Previously, my script (an HTML5 audio player) rendered some HTML elements on the page and then ran some script to use those elements, thusly:
audioplayer.html:
...
<div id="timeline">
<div id="showElapsed">
<div class="bg">
</div>
</div>
<div id="playhead"></div>
</div>
...
<script>
var playhead = document.getElementById('playhead'); // playhead
var timeline = document.getElementById('timeline'); // timeline
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
...
Now i'd like to move this into a controller / view layout in angular, so;
index.html
...
<div ng-controller="AudioPlayerController">
<div ng-include="'views/audioPlayerView.html'"></div>
</div>
...
main.js
...
function AudioPlayerController($scope) {
var playhead = document.getElementById('playhead'); // playhead
var timeline = document.getElementById('timeline'); // timeline
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
...
audioPlayerView.html:
...
<div id="timeline">
<div id="showElapsed">
<div class="bg">
</div>
</div>
<div id="playhead"></div>
</div>
...
Now I have a problem - document.getElementById('timeline'); doesn't return anything because its moved to a controller. Furthermore, the controller is called BEFORE the view, so how can the controller reference an element FROM the view?
I realize this is basic Angular layout stuff, but I can't figure it out. Could someone help me think in a more angular way please!? Thanks.

For dom interaction in angular you have directives elements
that implemented in the view.
directive link also complie after view is loaded, so no problem here.
note their declarations are written in camel case on the view, so:
javascript:
angular.module('myApp')
.directive('audioPlayer', function() {
return {
restrict: 'A',
template: 'path-to-your-page/audioPlayerView.html',
link: function(element) {
var playhead = element.find('playhead');
// timeline width adjusted for playhead
var timelineWidth = element.offsetWidth - playhead.offsetWidth;
}
};
});
html:
<div audio-player>
<div id="showElapsed">
<div class="bg">
</div>
</div>
<div id="playhead"></div>
</div>
note that,
in "angular way" you shouldn't make
document.getElementById(), just ==> angular.element()

jQuery scrollTop and parallax effect: Browser window jitters when scrolling at the very bottom

I have a little script that is creating a parallax effect. Therefore I created a data attribute with the speed velocity and a data-type to select the parallax elements. At the very same time, one of the elements fades out when scrolling down.
The script works fine, but unfortunately, when scrolling to the bottom of the site (and "overscroll" it), the site jitters like hell. It seems to be the part with the yPos and scrollTop method.
Do you have any ideas what the problem is?
Here's the markup:
<section class="slider">
<img src="images/hafen.jpg" class="slide" data-type="parallax" data-speed="3">
<div class="claim" data-type="parallax" data-speed="6">
<h1>SOME TEXT</h1>
</div>
<div class="arrow-down" data-type="parallax" data-speed="3">
<img src="images/arrow-down.png" alt="">
</div>
</section>
<section class="content" data-type="parallax" data-speed="1">
<div class="wrapper">
<img src="images/content.png" alt="">
</div>
<section>
That's my script:
$(window).scroll(function() {
var box;
$("[data-type=\"parallax\"]").each(function() {
var $bgobj, position, yPos;
$bgobj = $(this);
yPos = -($window.scrollTop() / $bgobj.data("speed"));
position = parseInt(yPos);
return $bgobj.css({
marginTop: position
});
});
box = $(".claim");
return box.css({
"opacity": 1 - $window.scrollTop() / 400
});
});

Seems like you are missing ( and ) around window here:
yPos = -($window.scrollTop() / $bgobj.data("speed"));
Should be:
yPos = -($(window).scrollTop() / $bgobj.data("speed"));
And you <section> isn't closed at the very end. Should be:
...
</section>
Not sure what your expected result should look like with proper CSS, but this seems to be working with the above changes:
http://jsfiddle.net/4Zmh8/
$(function () {
$(window).scroll(function () {
var box;
$("[data-type=\"parallax\"]").each(function () {
var $bgobj, position, yPos;
$bgobj = $(this);
yPos = -($(window).scrollTop() / $bgobj.data("speed"));
position = parseInt(yPos);
return $bgobj.css({
marginTop: position
});
});
box = $(".claim");
return box.css({
"opacity": 1 - $window.scrollTop() / 400
});
});
});