Im working on a website that behaves like a desktop where users can drag icons round the screen within a container and then click them to open windows. The issue im having is keeping the icons in view at all times so if a user decreases the browser size, the icons dont disappear off to the right. This website achieves it with what seems to be "translate" but im not sure how?
What ive acheived so far is keeping the icons in view by setting their position using %. But as soon as the icon is dragged this position is no long applied and if you resize the browser the icon stays where you left it and will disappear off screen.
See the below example, load the snippet and view it fullscreen, then resize the browser and the text stays in view at all times. But once you move the text then resize the browser it stays where it is rather than moving with the browser.
$(function() {
$(".drag-me").draggable();
});
.drag-me {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 16px;
position: absolute;
cursor: pointer;
top: 20% ;
left: 50% ;
width:50px;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="drag-me">
<span>Drag me around!</span>
</div>
You can use "containment: "window"" option and a helper function.
$(function() {
$(".drag-me").draggable({
containment: "window",
stop: function(e, ui) {
var perc = ui.position.left / ui.helper.parent().width() * 100;
ui.helper.css('left', perc + '%');
}
});
});
.drag-me {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 16px;
position: absolute;
cursor: pointer;
top: 20% ;
left: 50% ;
width:50px;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="drag-me">
<span>Drag me around!</span>
</div>
Related
So I sort of got it working. I believe I am not understanding the javascript correctly.
I took this from another thread, however it isn't behaving quite the way I am trying to achieve. I see the variables are a math equation that bases the movement on the window height.
How can I manipulate the equation so that I can control "Some cool text."'s initial position (if you notice on load it takes the correct position, and then on scroll it gets moved by JS) to stay where I want it?
What controls the speed and intensity of the movement and how can I manipulate that?
I believe I am just not understanding the syntax that controls all these variables, can you point me in the right direction for some reading to understand these specific variables? Thank you. :D
https://jsfiddle.net/codingcrafter/kv9od1ju/22/
/* Custom Horizontal Scrolling Parallax */
.hero-two {
overflow: hidden;
position: relative;
min-height: 500px;
}
h1 {
-webkit-text-stroke-width: 0.1rem;
-webkit-text-stroke-color: black;
color: #fff;
font-family: 'Open Sans', Helvetica, Times New Roman !important;
font-weight: 900;
}
.para-ele {
position: absolute;
width: 100%;
font-size: 5rem;
}
#hero-first {
left: 75%;
top: 15%;
}
#hero-second {
left: -32%;
bottom: 10%;
}
.container {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
}
<div class="container">
<div class="hero-two">
<h1 id="hero-first" class="h1 para-ele">
Some cool text.
</h1>
<h1 id="hero-second" class="h1 para-ele">
Some boring text.
</h1>
</div>
</div>
$(document).ready(function() {
var $horizontal = $('#hero-first');
$(window).scroll(function() {
var s = $(this).scrollTop(),
d = $(document).height(),
c = $(this).height();
scrollPercent = (s / (d - c));
var position = (scrollPercent * ($(document).width() - $horizontal.width()));
$horizontal.css({
'left': position
});
});
});
So you want to move the text from left to right or right to left?
I have done something similar to your issue but I used jQuery to handle the scroll effect.
If you are going to use the code below you will need to wrap the text within a element with the class Introduction
As the page scrolls the element will append the styles dynamically to the element.
<h1 class="introduction">
WE ARE A <br><span class="d">DIGITAL</span><br>PARTNER
</h1>
$(window).scroll(function() {
var wScroll = $(this).scrollTop();
$(".introduction").css({
transform: "translateX(-" + wScroll / 23 + "%)"
})
});
Demo: https://guide-nancy-64871.netlify.com/
When page is scrolled the header text moves to the left.
Read more on css transform: https://css-tricks.com/almanac/properties/t/transform/
Hope this helps!
I made an svg animated banner using html, css and GSAP tweenies. Everything's perfectly fine up until a point where a counter starts counting up using simple innerHTML property. All texts in the banner should be Roboto and they are except for this element which gets substituted with default Times New Roman. This happens only in Windows browsers: Edge and IE10, all other vendors browsers render it as it should be.
You can see on the last image the 70% stands waaaay out
css part:
.perc-counter {
> position: absolute;
> color: rgb(32, 33, 36);
> font-family: Roboto-Regular;
> font-size: 2.5em;
> top: 185px;
> text-align: right;
> right: 138px;
> opacity: 0;
> }
.percentage {
position: absolute;
color: rgb(32, 33, 36);
font-family: Roboto-Regular;
font-size: 2.5em;
top: 185px;
text-align: left;
left: 162px;
opacity: 0;
}
html part:
<div class="perc-counter" id="perc-counter">0</div>
<div class="percentage" id="percent">%</div>
js part:
var percCounter = document.getElementById("perc-counter");
var percent = document.getElementById("percent");
.to(counter, 1.2, {
val: newVal,
roundProps: "val",
onUpdate: function() {
percCounter.innerHTML = counter.val
})
Edit: specified this issue happens only in Windows browsers (initial question was confusing)
Perhaps can you try for IE :
<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
I have a header with logo, menu and search. When I'm on desktop I have all elements shown in that order, but if my window width is less than 980px, the menu hides (get's a toggle), and the logo is detached from the nav and attached after the logo. If the width is greater the logo is again detached and attached to the old place in the DOM.
$(window).on('resize', function() {
if ($(window).width() < 980) {
$('#search-container').detach().insertAfter('#logo');
} else {
$('#search-container').detach().insertAfter('#main_menu');
}
});
#logo {
display: block;
margin: 10px auto 15px;
text-align: center;
}
#search-container {
display: inline-block;
vertical-align: top;
margin-top: 8px;
background: #fff;
border-radius: 5px;
padding: 1px 10px;
}
#search-container .header_search {
display: inline-block;
line-height: 6px;
}
#search-container input {
border: 0;
background-color: transparent;
font-style: italic;
color: rgb(114, 114, 114);
color: rgba(114, 114, 114, 0.5);
font-size: 14px;
line-height: 25px;
font-weight: 400;
text-align: left;
display: inline-block;
vertical-align: top;
width: auto;
}
#search-container input:active,
#search-container input:focus {
outline: none;
border: 0;
}
#search-container .submit {
display: inline-block;
margin-left: 10px;
cursor: pointer;
z-index: 10;
}
#search-container .submit i {
color: #d3031c;
font-size: 26px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="logo">Logo</div>
<div class="menu_wrapper">
<nav>
<ul id="main_menu" class="">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
<div id="search-container" class="search-box-wrapper hide">
<div class="header_search">
<form name="search" id="search" method="get" action="#">
<input name="s" type="text" placeholder="Search" value="Search">
<a class="submit"><i class="fa fa-search"></i></a>
</form>
</div>
</div>
</nav>
</div>
Now the issue happens on mobile phones (and from the feedback, only on Android), when you tap on the input field to enter the search query, resize is being activated, and the search container detaches and attaches itself in the same space. And I have no idea why this happens. When I comment the part of the jquery code with the resize, I can type in the input field without the problem.
Why is resize being triggered on click? I checked the media queries, and I am not expanding the element in any way.
I still have no idea why this happens (the resize), but I found a solution:
I am turning off the window resize on $('#search-container') click event:
$('#search-container').on('click', function(){
$(window).off('resize');
});
Stops the window from resizing (which was causing the issue), and you can type on android with ease now :)
This is happening because the soft keyboard opens when the input element is clicked. Apparently resize triggers on a multitude of events, as described here: https://www.quirksmode.org/dom/events/resize_mobile.html.
Your solution works, but you could also use this approach, i.e.
$(window).on('resize', function(){
// If the current active element is a text input, we can assume the soft keyboard is visible.
if( $(document.activeElement).prop('type') !== 'text') {
if ($(window).width() < 980) {
$('#search-container').detach().insertAfter('#logo');
} else {
$('#search-container').detach().insertAfter('#main_menu');
}
}
}
It took me a while to realize that the mobile keyboard was triggering a resize event. I found out just by commenting out the resize functionality. I have two search inputs on the page and funny enough this problem happens to only one input, the one that I was moving in to a side menu on resize.
So what worked for me was to create a global boolean that would be true if my input was clicked. Then in my resize function i check if my boolean is true and if it is I force focus the input, if it is not then I execute the resize logic.
var isClicked = false;
function resize(){
if(isClicked){
$('#search-input').focus().select();
}else{
//resize logic
}
}
document.addEventListener("DOMContentLoaded", function(event) {
$('#search-input').click(function(){
isClicked = true;
});
resize();
});
On iphones, if the font-size of input-field is less than 16px, the 'ios' auto zooms the page. Set the font-size of input-field to 16px to tackle this problem.
I have created a function to center my <div> using jQuery, it works on page load but doesn't on page resize.
What am I doing wrong?
JS:
<script>
$( document ).ready(function() {
function reCenter() {
$('.content').css({
position:'absolute',
left: ($(window).width()
- $('.content').outerWidth())/2,
top: ($(window).height()
- $('.content').outerHeight())/2
});
}
$(window).resize(reCenter());
// To initially run the function:
reCenter();
});
</script>
HTML:
<div class="content">
<h1>Header</h1>
<span class="hyphen">-</span>
<h2>Subtext</h2>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
html {
background: darkgrey;
}
body {
color: #fff;
text-align: center;
/*padding-top: 300px;*/
}
h1 {
font-family: 'Arimo', sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 40px;
}
span.hyphen {
color: #0CFFFC;
font-size: 3em;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 100;
}
UPDATE
After getting the function to fire up on page load, it has some inconsistent behaviour between page load and window resize
http://jsfiddle.net/7zqkd4w8/
It should be $(window).resize(reCenter); since you are sending it a function not the results of calling the function.
You are trying to find width of '.content' div. You won't get proper width of the div unless its floating or absolute. You are giving absolute class to .content in reCenter(); so if you trigger your resize function twice(on first time) it would work.
$(window).on('resize',function(){
reCenter()
}).resize().resize();
But suggested method to do it is just add float left to the content and your existing code should work.
.content{
float:left;
}
You should do like this:
$(window).on('resize',function(){
reCenter()
}).resize();//triggers on first page load
There is bottom bar, with CSS:
#bottom_nav {
position: absolute;
bottom: 0;
left: 0;
border-top: solid 1px lightgray;
background: url('http://localhost:3000/assets/font-try.jpg');
height: 70px;
width: 100%;
font-family: "ProximaNova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;}
And on some AJAX actions there is Jquery function, to prevent elements сover bottom bar:
var $beforeBar= $('#bottom_nav').prev().offset().top;
var $beforeBarPosition=$beforeBar+ $('#bottom_nav').prev().height();
if($beforeBarPosition+50>=$('#bottom_nav').offset().top){
$('#bottom_nav').css({'top':$(document).height()+100});
}
Problem is that each time this function called, all elements on the page are shifted left slightly. Looks really ugly. If I disable function, no shift.
Also, jsfiddle
EDIT:
Yeath, I got it, it is appearing window scroll panel on changing doc height.
Any solutions?
The shift is caused by this line:
$('#bottom_nav').css({'top':$(document).height()+100});
This is setting the top of the #bottom_nav element to 100 pixels past the end of the document... effectively increasing the height of the document by 170px (100px + the height of #bottom_nav). The next time this code is run, the value returned from $(document).height() is 170 higher... leading the page to expand in height by yet another 170px.