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
Related
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>
I have script that is not working in my wordpress site, but it used to be working before I had my pc reset. I can't find the error in these lines, maybe the problem is another, don't really know. The only suggest is Eslint teminated with error:timeout from brackets debug... It used to work unless, I don't know if I modified it and ended up making some mistake, my knowledge is kinda obsolete since it's been a while and I'm refreshing...
jQuery(document).ready(function() {
// define variables
var navOffset, scrollPos = 0;
// add utility wrapper elements for positioning
jQuery(".blog-nav").wrap('<div class="nav-placeholder"></div>');
// function to run on page load and window resize
function stickyUtility() {
// only update navOffset if it is not currently using fixed position
if (jQuery(".blog-nav").hasClass("fixed")) {
navOffset = jQuery(".blog-nav").offset().top;
}
// apply matching height to nav wrapper div to avoid awkward content jumps
jQuery(".nav-placeholder").height(jQuery(".blog-nav").outerHeight());
} // end stickyUtility function
// run on page load
stickyUtility();
// run on window resize
jQuery(window).resize(function() {
stickyUtility();
});
// run on scroll event
jQuery(window).scroll(function() {
scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery(".blog-nav").addClass("fixed");
} else {
jQuery(".blog-nav").removeClass("fixed");
}
});
});
.blog-nav {
width: 100%;
height: 30px;
background-color: #000000;
margin: 0;
padding: 0;
}
div.blog nav li {
padding-top: 6px;
}
nav.blog-nav li a:link,
nav.blog-nav li a:visited {
color: #FFF;
text-decoration: none;
list-style: none;
margin-left: 50px;
font-weight: bold;
}
div.blog a:visited,
div.blog a:link {
color: #000000;
}
.fixed {
position: fixed;
top: 0;
}
.space {
height: 300px;
}
<div class="blog" id="blog" name="blog">
<nav class="blog-nav">
<li>Notizie</li>
</nav>
<div class="space"></div>
</div>
I had same error with my jquery code in wordpress. code it works fine but when I upload site online stop working
First check your functions file in php and make sure that you include jquery in head
function my_enqueue_scripts() {wp_enqueue_script('jquery');}
make sure that jquery file required above every js file
I have a dl but when I run it, the dd elements work properly when dt is first clicked, but then the dd style's change to display:none, and I'm not sure why. How do I keep the style from changing? I have tried adding display: block!important to my css and to the dd tags themselves, but that didn't work. Here is my JQuery, CSS and HTML code (the JQuery is embded in $(document).ready( function(){})
setUpMenu();
function setUpMenu() {
$("dt").click(function(){
$("dd").slideUp("fast");
$(this).next().slideDown("fast");
return false;
});
}
<style>
dt {
list-style: none; cursor: pointer;
background-color: #558C89;
width: 150px; height: 25px;
font-size: 1.1em; color: white; text-align: center;
}
dt:hover {
background-color: #D9853B;
}
dd {
text-decoration: none;
}
.otherMenu {
float: left; margin-left: 3%;
}
</style>
<body>
<div class="otherMenu">
<label>More items available:</label>
<dl>
<dt>Mounts</dt>
<dd>Picture</dd>
<dd>Photos</dd>
<dt>Shadow Boxes</dt>
<dt>Multi-frames +</dt>
<dd>2 picture</dd>
<dd>3 picture </dd>
<dd>4 picture</dd>
<dt>Posters frames</dt>
<dt>Artist frames</dt>
<dt>Classic posters</dt>
<dt>Accessories</dt>
</dl>
</div>
</body>
It's because of this line : $("dd").slideUp("fast");
It means that when dd are visible, they turns to hide because of the slideUp() function. The contrary is slideDown() which show them.
EDIT
If I understand correctly what you're asking you can use nextUntil() function to open all dd elements until the next dt element
Like this
setUpMenu();
function setUpMenu() {
$("dt").click(function(){
$("dd").slideUp("fast");
$(this).nextUntil("dt", "dd" ).slideDown("fast");
return false;
});
}
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.
When you click the production cube a popup opens up.
The popup under the image has four links.
But I can see only three links.
How to see the fourth link.
http://jsfiddle.net/Lx7kx/7/embedded/result/
<div class="cubeCellProduction" data-text="Production" data-caption="<a style='padding-left: 30px; font-size: 14px; color: grey;' href='/' >Work Orders</a> <div> <a style='padding-left: 40px; font-size: 14px; color: grey;' >Projects</a> </div>
<div><a style='padding-left: 42px; font-size: 14px; color: grey;' > Work Flow </a></div>
<a style='padding-left: 42px; font-size: 14px; color: grey;' >Reports</a>"
data-image="http://intra.defie.co/images/Desktop_icons_02.07.13/production.png"></div>
$('document').ready(function() {
window.setTimeout(function() {
$('.cubeCellProduction').each(function() {
var htmlText = $(this).attr('data-text');
$(this).append('<div class="cubeTextStyleProduction">' + htmlText + '</div>');
$(this).hover(
function() {
$(".cubeTextStyleProduction").addClass("hovered").append("<span class='divStockProduction'>Production</span>");
},
function() {
$(this).find("span:last").remove();
$(".cubeTextStyleProduction").removeClass("hovered");
});
});
}, 600);
});
.caption class is set to height: 90px !important;. Change to height: auto; and that will resolve problem for any number of links.
.caption's max-height is preventing the last element from being displayed.
.caption { max-height: 90px !important; }
The max-height needs to be incremented in order to accommodate the hidden element or (ideally) you should use min-height and padding to achieve the desired layout.
I suspect it might also have something to do with the fact that your second and third link are inside a div, but the first and fourth aren't. Is that what you wanted to do?