How do i reposition my previous slick arrow to become operable? - javascript

I am currently creating my webpage using HTML/CSS with the addition of Javascript slick slider. I am currently using the regular slider code for my gallery tab, however, my previous arrow button (.slick-prev:before) is submerged behind my div class "slider_1", with my .slick-next:before arrow working how it should be comfortably sitting outside of the div.
I have added margin and padding to .slick-prev:before however it only pushes the arrow further out of sight within the div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link href="styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
.slick-slide
{
margin: 0px 0px 0px 60px;
}
.slick-prev:before,
.slick-next:before
{
color: black;
}
</style>
</head>`
`<div class="slider_1">
<div><img src="twitter.png" width="400px" height="400px">Photo1</div>
<div><img src="twitter.png" width="400px" height="400px">Photo2</div>
<div><img src="twitter.png" width="400px" height="400px">Photo3</div>
<div><img src="twitter.png" width="400px" height="400px">Photo4</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider_1').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
I would like to be able to have my previous arrow outside of the slider div to become operable. as currently the arrow simply sits behind my images inside the slider not serving any purpose.

Understanding:
Having read your question, I feel your experiencing layer problems, in that your next and previous buttons are hidden behind other web elements.
Solution:
We can write some CSS that tells it to alter the layer position to a higher layering number, to do this we use CSS using the Z-Index property and assign a high number such as 99 to ensure it sits above all other elements on the webpage.
To use z-index we must specify a position property with the value of fixed, absolute or relative.
In my example, I have used the relative value, so that it doesn't tamper with where the arrows were originally positioned.
Code to try:
.slick-prev, .slick-next{
position: relative;
z-index:99 !important;
}
However, if you find that the code only affects 1 of your sliders, then you might want to add an ID to the sliders HTML and write your CSS as follows:
#slider_1.slick-prev, #slider_1.slick-next{
position: relative;
z-index:99 !important;
}
Then alter the affected slider's HTML to have the ID in it also
<div class="slider1" id="slider1">

Related

adding mouseover event to img element doesn't work

this is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body onload="load();">
<img src="img1.png">
<img src="img2.png">
<img class="img3" src="img3.png">
</body>
</html>
And I want the 3rd image to go to the left when mouse is over it. (It has position: absolute; on it) using this js code
let img;
function load(){
img = document.querySelector(".img3");
img.addEventListener("mouseover", mouseover);
}
function mouseover(){
img.style.left = "0px";
}
but mouseover never gets called. (Checked with logging)
you can use the hover method in css to achieve this, it would look something like:
.img3:hover {
width: *put desired width here*;
height: *put desired height here*;
}
You might need to use id tags to make the default image shrink when the img3:hover event occurs. You can find more information about it here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
In your css you can use
.img3:hover{
/* css here */
}
If you use this method you do not need to use Javascript to change css on hover it is built in to css already :)

After page load bootstrap always changes position of elements with absolute position on phones

Concrete problem is that I want have a page on server with structure of elements with nice positioning, but I couldn´t get it into desired shape, but only with setting them absolute position counted by screen resolution on mobile phones with jquery. After page load bootstrap will move my elements with absolute path more up. All those elements are at the bottom of page. I know that it is bootstrap, because when I will not add bootstrap server links, everything is fine as far as position of my elements is concerned. But naturally I need bootstrap there.
I tried to figure it out in many ways, but I ended with tryings to wait with jquery till the page load and after that try to set position. But no, after all moving in function that is called after page load, bootstrap starts doing it´s job later as last and don´t know how and why, but it trim my elements and push all my circles all up with bad height positions.
$(document).ready(function () {
// script for setting bubble circles in right place on whatever screen
// this is updated question for correct answer below, id=allCircles is id of global div for circles
$width = $('#allCircles').width();
$circleWidth = parseInt($('.circle').css('width'),10);
$circlesDistance = 60;
$leftCircles = ($width)/2 -(($circlesDistance/2)+$circleWidth);
$rightCircles = ($width)/2 + ($circlesDistance/2);
$('.left-circle').css('left', $leftCircles+'px' );
$('.right-circle').css('left', $rightCircles +'px');
$actPosition = $("#leftDownCircle").position();
$heightMargin= $actPosition.top + $circleWidth/2;
$('#leftDownCircle').css('top', $heightMargin+'px' );
$('#rightDownCircle').css('top', $heightMargin+'px' );
$leftMargin = ($width)/2 - ($circleWidth/2);
$heightMargin = ($heightMargin) -($circleWidth/2)-($circleWidth/4);
$('#middleCircle').css('position','absolute');
$('#middleCircle').css('left', $leftMargin +'px' );
$('#middleCircle').css('top', $heightMargin +'px' );
});
* {margin:0;}
.circle {
width: 100px;
height: 100px;
background: lightgrey;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
line-height: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.left-circle {
position: absolute; left: 15%;
}
.right-circle {
position: absolute; left: 60%;
}
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="left-circle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="right-circle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div id="middleCircle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="left-circle" id="leftDownCircle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="right-circle" id="rightDownCircle">
<div class="circle" >
<h1>9</h1>
<p>Level</p>
</div>
</div>
</body>
</html>
When I will add in this code to html header this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Then on phone it will result to this:
Could someone help me to answer how this can be done programmatically correctly? (maybe why this not work or what is better practice to make the desired result as in snippet, thanks in advance for any help and your time!)
Now concrete site whith its code in it. Web emulator looks:
http://mobiletest.me/htc_one_emulator/?u=https://stackoverflowtest.000webhostapp.com/
Concrete site to test with your mobile device:
https://stackoverflowtest.000webhostapp.com/
Notice left-down waiting for bootstrap and after reload:
The basic problem you are having is that by making the elements absolute, they are positioned in relation to the nearest non-static parent element. I don't see any non-static parent elements on your page, so in your case they will be positioned relative to the body. This causes a problem as you have lots of other elements that can be different sizes (e.g. because of text wrapping over multiple lines on mobile screen that would only take one line on desktop size) before you get to the circles so determining the right top value in relation to body is not possible.
Note, two of your circles don't have a top value set, so they are placed in their default static places, which is why you are getting the overlaps.
To fix it, you need to place a non-static element around your absolute elements (e.g. by giving it a position:relative style). Position top and left values the circles in relation to that element and give the element a height that will give the circles enough space.
e.g.
<div style="min-height: 550px;position:relative;">
<div class="left-circle" style="left: 30px;">
<div class="circle">
<h2>345</h2>
<p>Bodov</p>
</div>
</div>
<div class="right-circle" style="left: 190px;">
<div class="circle">
<h2>11</h2>
<p>Best of</p>
</div>
</div>
<div id="middleCircle" style="position: absolute;
left: 110px;
top: 100px;">
<div class="circle">
<h1>9</h1>
<p>Uroven</p>
</div>
</div>
<div class="left-circle" id="leftDownCircle" style="left: 30px;
top: 198px;">
<div class="circle">
<h2>1622</h2>
<p>Zaradenych knih</p>
</div>
</div>
<div class="right-circle" id="rightDownCircle" style="left: 190px;
top: 198px;">
<div class="circle">
<h2>124</h2>
<p>Citatelov</p>
</div>
</div>
</div>
The key things to note here are:
I have put all your circles inside a div with a position:relative and a height:550px;
I have changed the top values of the circles to position themselves in relation to this new parent div.

Arrows besides bootstrap container

I have a bootstrap container. As this is common for it, it doesn't take the hole page width, but is centered with a lot of margin on the left and right side.
What I'm trying to achieve is, that on the left and the right side (so besides the div with the container class, there are 2 centered arrows, left side pointing to left and right side pointing to the right.
You wonder, why I want to do that? I try to make something like a Carousel, but with pages, so when I click on the right arrow, there comes the content of the next page, clicking on the left arrow then, I get back to the other page.. I hope you know what I mean...
What I have is this:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Upload</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/dropzone.css" type="text/css"/>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/dropzone.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container fill">
<form action="upload.php" class="dropzone needsclick dz-clickable full-height">
<div class="dz-message"><b> </b></div>
</form>
</div>
</body>
</html>
You could do it globally as Bootstrap does with the arrow in the carousel :
Having parents containers in each side of the page, fixed to the top AND with the screen's height as fixed height (easy to do with JQuery).
<body>
<div class="parentofarrow left"><div class="parrentofarrow__arrow left"></div></div>
<div class="parentofarrow right"><div class="parrentofarrow__arrow right"></div></div>
<div class="container"></div>
</body>
You could have a another parent for all of them to have a different structure or anything. (in this case change position fixed to position absolute)
And in css :
.parentofarrow {
position: fixed; // or absolute to a specific parent (relative)
top: 0px;
// height fixed with screensheight using Jquery
width: // as you wish;
text-align: center; // or margin auto on arrows
}
.parentofarrow.left { left: 0px; }
.parentofarrow.right { right: 0px; }
.parentofarrow__arrow { //customize and positionning as you wish }
And in these parents, having a vertical and horizontal align arrow with a specific action linked to change page content as you wish.
Should be enough!
Note that this solution is not the easiest but it offers a certain modularity (change height, parent, position...).
The simplest way without taking your elements position in consideration would be using negative margins. (fiddle here)
html:
<div id="arrow">←</div>
css:
#arrow {
margin-left: -100px;
}
Another viable way is to use position: absolute like this:
#container {
position: relative;
}
#left-arrow {
position: absolute;
top: 40%;
bottom: 40%;
height: 10%;
line-height: 100%;
left: -5%;
}
The easiest solution is too use the grid system.
<div class="container fill">
<div class="row">
<div class="col-xs-1">Left</div>
<div class="col-xs-10 main-stage">
<form action="upload.php" class="dropzone needsclick dz-clickable full-height">
<div class="dz-message"><b> </b></div>
</form>
</div>
<div class="col-xs-1">Right</div>
</div>
</div>
</body>

Having trouble using rhino slider with a full page image

I am trying to add a rhino slider to my website which will fade in and out of multiple images at full screen size. The rhinoslider I am using is: Rhinoslider I can get this so the slider works but in doing so it pushes the other divisions underneath the slider further down the page where they shouldn't be.
The code:
HTML:
<head>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/rhinoslider-1.05.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
<script type="text/javascript" src="js/mousewheel.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').rhinoslider({
effect: 'fade',
controlsMousewheel: false,
controlsKeyboard: false,
controlsPrevNext: false,
controlsPlayPause: false,
autoPlay: true,
pauseOnHover: false,
showBullets: 'never',
showControls: 'never'
});
});
</script>
</head>
<body>
<div class="CVHeader">
<ul id="slider">
<li><img src="images/CVHeader.jpg"/></li>
<li><img src="images/hmb-header-image.jpg"/></li>
</ul>
</div>
<div id="expertisediv">
<div class="largeshape1">
<img src="images/largeshape1.jpg"/>
</div>
</div>
</body>
main CSS:
.CVHeader {
width:100%;
height:auto;
}
#slider li {
list-style:none;
}
#slider{
width:100%;
height:auto;
padding:0;
margin:0;
}
#expertisediv {
width:100%;
height:auto;
background-color:#FFFFFF;
padding-bottom:8%;
float:left;
}
.largeshape1 {
width: 19.3%;
height:auto;
min-height: 120px;
max-height:auto;
padding-top:4.5%;
float:left;
}
Any help appreciated.
Here is a quick Fiddle of your code above, obviously using some different images.
I can only assume either your slider or other code somewhere in your page is breaking the site, because you can see here, the lower DIV is not being pushed down that far, just the padding % that is specified in your CSS.
padding-top:4.5%;
http://jsfiddle.net/1g8gha62/
Maybe try to edit that padding value to a specific pixel value instead of percent? just a thought.

Change image on mouseover for a button on another div

On the "home" page I want to have a logotype and a menu on a #banner div (which will then be there throughout the whole site) and on a #content" div to have an image. All these divs are inside a #container" div. The menu has 3 buttons.
I would like that on mouseover event each button displayed image on the #content div changes accordingly. So basically, when hover button1, the image on #content will change from background.jpg to background1.jpg. The event of mouseover on button2 will change it to background2.jpg etc. When buttons are not hovered over, the image should revert to the original background.jpg.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>E.S.T.</title>
<link href="_css/layout.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
<div id="logo">E.S.T.</div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1">Biography</li>
<li id="button2">Albums</li>
<li id="button3">Links</li>
</ul>
</div>
</div>
<div id="content">
<img id="back0" src="_img/background.jpg">
<img id="back1" src="_img/back_bio.jpg">
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1,
{
imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"
});
</script>
</body>
</html>
CSS:
#charset "UTF-8";
#import url("../_fonts/Days/fontstylesheet.css");
body {
background-color:#CCC;
font-family:Days;
font-size:100%;
}
#container {
width:850px;
max-height: 650px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
font-family: Days;
}
#logo {
position:relative;
font-size: 4em;
color:white;
float:left;
}
#menu {
float:right;
margin-top:40px;
}
I have tried several different things but I manage only to change the background image from the buttons themselves. From searching around the web i think this should be done with JS, but i have no idea how to do it.
This can be solved entirely with CSS, but first let me give you a tip:
Combine background.jpg and background1.jpg into one image, and rather change the background position. This way, there won't be any delay from when the user hovers over the menu element to when the picture is displayed, and you'll have fewer files to keep track of.
Say we let #button1 be 100px tall. We make an image 200px tall containing the normal state image on top, and the hover image on the bottom. This is called a sprite.
#button1 {
height: 100px;
background-image: url("background.jpg");
}
#button1:hover {
background-position: 0 -100px;
}
This moves the background image, showing the hover version.
For convenience, I'll answer this question using the jQuery javascript library.
If I understand you right, you would like #content to contain an image that changes when you hover over the menu items, and the image should reflect the item currently hovered.
In stead of including every image in the body, I'll try an approach using the data attributes.
HTML The relevant parts
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1" data-img="background.jpg">Biography</li>
<li id="button2" data-img="back_album.jpg">Albums</li>
<li id="button3">Links</li>
</ul>
<div id="content">
<img id="back"
src="_img/background.jpg"
data-original="_img/background.jpg"
alt="e.s.t" />
</div>
JavaScript
$(document).ready(function() {
$("#MenuBar1 li").mouseover(function() {
$("#back").attr("src", $(this).data("img"));
}).mouseout(function() {
$("#back").attr("src", $("#back").data("original"));
});
});​
So now we store the original image path with the image tag in its data-original attribute, and the path to the :hover image is stored with the menu element.
See this Fiddle for a demo!
Give an id on your image like: id=idimage
You can use jQuery like this:
<script type="text/javascript">
$(document).ready(function(){
$("#MenuBar1 li").mouseover(function(){
var id=$(this).attr('id');
var number = id[id.length-1];
$("#id_image").attr("src","_img/background"+number+".jpg");
});
});
</script>

Categories

Resources