The following JavaScript & jQuery code allowed me to set a full-width background on a submenu which was inside a smaller container div, by adjusting the left offset and width based on page width (with and without a scrollbar) and the distance of the object to the left side of the page.
var scrollContainer = document.getElementById('scroll-container');
var subBg = document.getElementsByClassName('sub-bg');
var mainMenu = document.getElementsByClassName('main-menu');
function GetElementDistance(obj) {
var leftLen = obj.getBoundingClientRect().left;
var rightLen = obj.getBoundingClientRect().right;
return [leftLen, rightLen];
}
Array.from(mainMenu).forEach(function(mainMenu, index) {
mainMenu.addEventListener('mouseenter', function() {
var leftDistance = "-" + GetElementDistance(subBg[index])[0] + "px";
if (Modernizr.hiddenscroll === true) {
$('.sub-bg').css({
"width": scrollContainer.offsetWidth,
"left": leftDistance
});
} else {
$('.sub-bg').css({
"width": scrollContainer.clientWidth,
"left": leftDistance
});
}
});
mainMenu.addEventListener('mouseleave', function() {
$('.sub-bg').css({
"left": "0px"
});
});
});
This SQL query is designed to return all movies, alongside their director and rating, where the movie has a higher rating than another movie (in this case, American Beauty), and where the movie was released after another movie (in this case, Lawrence of Arabia).
SELECT DISTINCT mv.mov_title AS "Movie Title",
dr.dir_fname || ' ' || dr.dir_lname AS "Director",
rt.rev_stars AS "Rating"
FROM movie AS mv
JOIN movie_cast AS mv_cst ON mv_cst.mov_id = mv.mov_id
JOIN rating AS rt ON rt.mov_id = mv.mov_id
JOIN movie_direction AS mv_dr ON mv_dr.mov_id = mv.mov_id
JOIN director AS dr ON dr.dir_id = mv_dr.dir_id
WHERE rt.rev_stars > (
SELECT rating.rev_stars
FROM rating
JOIN movie ON movie.mov_id = rating.mov_id
WHERE movie.mov_title = 'American Beauty'
)
AND mv.mov_year > (
SELECT mov_year
FROM movie
WHERE movie.mov_title = 'Lawrence of Arabia'
)
ORDER BY mv.mov_title ASC;
This code returns the following data from the database:
Movie Title | Director | Rating |
---|---|---|
Aliens | James Cameron | 8.40 |
Annie Hall | Woody Allen | 8.10 |
Blade Runner | Ridley Scott | 8.20 |
Donnie Darko | Richard Kelly | 8.10 |
Princess Mononoke | Hayao Miyazaki | 8.40 |
Slumdog Millionaire | Danny Boyle | 8.00 |
The Usual Suspects | Bryan Singer | 8.60 |
Titanic | James Cameron | 7.70 |