I have two division classes in my responsive site: section_left1 and section_right1
section_right1 flows very well with the document, but section_left1 is the problem.
Each time the document is ready or browser has been resized, i want to pass the height of section_right1 to section_left1.
How can i change the css properties with jquery or some other easy way?
Normally you would use
var height_foo = $('#selector_foo').height();
$('#selector_bar').css({
height: height_foo,
color: green
});
Is there any problem with using this approach?
PS. Obviously you can update height_foo on window resize, or scroll or whatever you need. You're really flexible...
You would use other css properties to achieve the goal. Like the three column answer.
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
You can do this with regular Javascript:
(this method uses ID's, not classes)
x=document.getElementById('id');
x.style.height='123px';
This is according to W3.
Or, you can use JQuery:
$('.class').css({
height: 120px;
color: 'red';
});
There are multitudes of other possible ways to do this, but these are the easiest.
Hope that helps!
Related
I'm working with google maps and I want to change the "info window" dimensions.
The gmaps js automatically generate this section:
I want to target the selected section that has no id or class to identify changing it's width. Then I thought that I need to use it's child div class named "gm-style-iw" like a reference to reach the other div above.
The idea would be something like this:
div < .gm-style-iw {
width: 220px;
}
but we know that this '<' is not possible using css.
How can I do that?
As you are probably already aware, you'll need javascript for this to work as intended, and using jQuery's .parent()ref. method would probably be the most straight forward route to getting there.
Ref: .parent() | jQuery API Documentation
Consider the below:
jQuery('.gm-style-iw').parent().css('width','220px');
On inspecting the element, you will notice that the inline width property has been applied and is over-qualifying the external width property rule set be the selector .parent.
Code Snippet Demonstration:
jQuery('.gm-style-iw').parent().css('width','220px');
.parent {
width: 100%;
background: #dadada;
padding: 5px;
border: 1px dashed;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="gm-style-iw"><code>gm-style-iw</code></div>
</div>
It may be better practice to consider applying a class to these elements instead. As demonstrated above, inline style rules are quite persistent and are tricky to over-qualify without depending too much on the !important declaration.
Consider the following:
jQuery('.gm-style-iw').parent().addClass('contians-child');
Using a class selector as your identifier, you can circumvent this issue which may be sparing you some grey hairs down the line or wasted hours further on into your build.
Code Snippet Demonstration:
jQuery('.gm-style-iw').parent().addClass('contians-child');
.parent {
width: 100%;
background: #dadada;
padding: 5px;
border: 1px dashed;
box-sizing: border-box;
}
.parent.contians-child {
width: 220px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="gm-style-iw"><code>gm-style-iw</code></div>
</div>
Based off this example on jsfiddle, what I have is identical. I'm trying to come up with a way for when you have an empty space on the right and be able to move the left div to the right without being forced back.
I've tried the following css:
$(function()
if( $(".portlet").css('left', '165px') ) {
$(".portlet").css('left', '51%');
} else {
$(".portlet").css('left', '1%');
}
)};
Just to note that I'm fairly new to jQuery UI.
One simple way to do this, if it doesn't interfere with the rest of your layout, would be to force the height of your sortable. Like this:
.sortable {
width: 200px;
float: left;
padding-bottom: 100px;
height: 600px;
}
http://jsfiddle.net/g6urafLf/1/
Before you read this please get up this website to see what I am trying to do:
https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page.
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button.
If you know any links to examples etc... I would really appreciate it!
Thank you for your time,
Kerry x
The first thing is that you have a wrong DOCTYPE.
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. Change it to
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI.
Second is you are using a <table> for navigation. Nothing seriously wrong with it but people tend to use ul
For the :hover, you can simply use
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly.
Make the "buttons" anchors. Using css set create a rule for :hover to set a background image that contains the arrow.
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it.
Keep in mind that javascript is not at all necessary to accomplish what you are doing. Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach.
PURE CSS SOLUTION
Check this answer.
Is there any way to hover over one element and affect a different element?
So it might be:
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div.
Just move the arrow bymargin-left with respect to left of the td DEMO
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use
$(function(){
currentPos = $("#Arrow").css("margin-left");
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left});
});
$("#MenuPosition").on("mouseout","td",function(){
$("#Arrow").css({"margin-left":currentPos});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT.
PS: cant correct is because its my log out time from office ;) . but i thing you got the logic to do it
You can do something like this:
Using a span to add the bg arrow below the nav/menu lis in the HTML:
<ul class="nav">
<li>
Menu 1
<span class="arrow"> </span>
</li>
<li>
Menu 2
<span class="arrow"> </span>
</li>
</ul>
The CSS:
.nav {
font-size: anypx;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.nav li {
background: #whatev;
display: block;
float: left;
height: anypx;
line-height: anypx;
padding: 0;
text-align: center;
}
.nav li a {
color: #any;
display: block;
padding: any;
position: relative;
text-decoration: none;
width: auto;
}
.arrow {
background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
display: none;
height: anypx;
text-indent: -9999px;
width: whatevs;
z-index: 9999;
}
And Finally the JS/Jquery that makes it work:
$(document).ready(function(){
Your_menu();
});
function Your_menu(){
$(".nav li").hover(function(){
$(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('.arrow').css({visibility: "hidden"});
});
}
Here is a site that is showing this :)
http://www.drexelmedicine.org/
I've been all over stackoverflow looking for a solid solution for this; however, I'm coming up a short. I believe my problem is just in my semantics.
http://jsfiddle.net/hzRAN/10/
here's some sample code.
For best results: I would love for this script to re-adjust if there is a page width change.
the real code is linked from this website
http://designobvio.us/DoUs/Blog.html
its a fluid layout which is why I need the horizontal list item to justify itself correctly.
Thanks for the help !
The only way you can accomplish this is by setting the width of each list item or by using padding:
ul {
list-style: none;
margin-left: 0;
padding-left: 0; /* remove the indention */
overflow: hidden; /* to enclose the float children */
}
li {
width: 20%; /* actually, use some slightly undersized value to supply a bit of slop */
float: left;
}
If you are looking to use jQuery to achieve this, use the window.resize function, and then call that function on load.
$(document).ready(function(){
$(window).resize(function() {
// your code here:
});
$(window).resize();
});
I have managed to get a quick example running on jsfiddle (I forked yours) http://jsfiddle.net/rSeaE/1/ but its having trouble due to the width of the #daymenu I think.
I'd like to display a little tooltip similar to this:
That little black box appears when I put my mouse over it. How can I achieve this? Is it using jQuery or MooTools or what?
Thanks from this beginnig web designer!
I think you can do it with CSS, no need for Javascript.
The black box (the tooltip) can be an absolutely positioned child with display: none by default, and on :hover you can show it.
Here is a little demo.
Example CSS:
.tooltipped { position: relative; }
.tooltip { display: none; position: absolute; width: 100%; left: 0; top: 35px; }
.tooltipped:hover .tooltip { display: block; }
for the HTML (which remains readable without CSS!):
<div class="tooltipped">3 <span class="tooltip">acorns remaining</span></div>
This method will work in every modern browser and IE >= 7. IE6 only supports the :hover selector on links, so you need to use an a element if you want to support it (or find a different workaround).
This is done through JavaScript. I would recommend using the jQuery framework, as there are a load of different jQuery Tool Tip plug-ins ready for you to use.
For example.
Definitely looks like Tipsy, a jQuery plugin I used.
With jQuery, assuming you had a div properly formatted like thus: (notice this is an extremely simple example. I'm not defining the classes to properly format the elements or anything like that)
3
and
<div class="onmouseoverpopup parent">
<div class="onmouesoverpopup arrowontopmiddle"></div>
<div class="onmouesoverpopup text">Acorns remaining</div>
</div>
You might do something like this
$(document).ready( function() {
$(".acornsremaining").hover( function() {
$(".onmouseoverpopup.parent").show();
}, function() {
$(".onmouseoverpopup.parent").hide();
});
});