I've been trying to use JqueryUIs resizable to create resizable divs like on jsfiddle for example. Jsfiddle makes use of JqueryUI resizable with handles so that you can expand the code editor or the output area displaying the dhtml results (a design etc). I've just about tried every solution given to others who experience problems working with jquery ui's resizble. Is there a way to create a resizable div with CSS only and have a custom handle? I've tried this as well and it's not working either http://blog.softlayer.com/2012/no-iframes-dynamically-resize-divs-with-jquery/ but it's what I'm looking for; two divs, one containing the main content and the other containing sidebar stuff. I made a fiddle quickly of that solution given here: http://jsfiddle.net/asx4M/1/ I would appreciate it if someone could tell me what it is I'm doing wrong or provide me with another solution for what I'm trying to do.
here's the code as well:
<!DOCTYPE html>
<html>
<head>
<style>
#sidebar {
width: 49%;
}
#content {
width: 49%;
float: left;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery- ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$( "#sidebar" ).resizable({
});
$("#sidebar").bind("resize", function (event, ui) {
var setWidth = $("#sidebar").width();
$('#content').width(1224-setWidth);
$('.menu').width(setWidth-6);
});
});
</script>
</head>
<div id="sidebar">
<div class="sidebar-menu">
<!-- all your sidebar/navigational items go here -->
</div>
</div>
<div id="content">
<!-- all your main content goes here -->
</div>
$('#content).width(1224-setWidth);
$('.menu).width(setWidth-6);
Should be
$('#content').width(1224-setWidth);
$('.menu').width(setWidth-6);
The problem is with the quotes that you have not closed. for menu class and content id
$(document).ready(function() {
$( "#sidebar" ).resizable({
});
$("#sidebar ").bind("resize", function (event, ui) {
var setWidth = $("#sidebar").width();
$('#content').width(1224-setWidth);
$('.sidebar-menu').width(setWidth-6);
});
});
Related
Im a complete noob when it comes to JavaScript and jQuery but here we go.
I want to make a slidetoggle that shows 3 slides, 3 "snowboardtricks" when i press "toggle".
As it is now only one "trick" is shown when i press toggle, the rest is already there from the beginning.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel,#panel2,#panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#panel2,#panel3,#flip
{
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#panel
{
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>
</body>
</html>
If I'm understanding correctly, on page load you only want to display "Toggle". When you click "Toggle" you want to show the three other sections.
To do that you want to place the three other sections inside of a wrapper div, and then use slide toggle on the wrapper div instead.
Quick jsfiddle: http://jsfiddle.net/43byX/
Here is a modified version of your code:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#drawer").slideToggle("slow");
});
});
</script>
<style type="text/css">
#toggle,
.panel {
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#drawer {
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="toggle">Toggle Me</div>
<div id="drawer">
<div class="panel">Switch back 1080 double cork</div>
<div class="panel">Frontside triple cork 1440</div>
<div class="panel">Ollie</div>
</div>
</body>
</html>
#panel, #panel2, #panel3
{
padding:5px;
display:none;
}
You are in essence hiding only the div whose id is panel. But the other two div's are visible. Those need to be hidden as well. This way when you toggle all three will have their displays turned to true.
On a side note is there a reason you are creating your own toggle? It might be faster to use twitter bootstrap which already comes with it. See This
Correct me if I'm wrong, but it seems what you're trying to do can be more easily accomplished using accordion.
Quick jFiddle example here. Click the headers to see the effects.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
You can erase the active code if you want one of the panes to be open when the page loads, and you can erase the collapsible line if you want one of the panes to always remain open.
and then the html layout:
<div id="flip">
<h3>Switch back 1080 double cork</h3>
<div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
<div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
<div><p>some text or whatevs here</p></div>
</div>
Read more about accordion here.
Edit: It may be better to put the
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
just before the closing body tag instead of in the header. Best practices would have you put it in a separate file and link it in the header.
I think, you want to toggle that one hidden element one by one. Well, If I am not wrong, then here is the code:
$("#flip").click(function(){
var targets = $("#panel, #panel2, #panel3"),
hiddenElm = targets.filter(":hidden");
hiddenElm.slideDown();
if(hiddenElm.next().length){
hiddenElm.next().slideUp();
} else {
targets.first().slideUp();
}
});
Working jsfiddle: http://jsfiddle.net/ashishanexpert/jg2wg/
I have found a tutorial for lazy loading Facebook's like box, but it's appropriate only if you use one FB widget on a page.
How would it look like if you want to load "like button" normally, but would like to lazy load "like box", i. e. load it only if the user scrolls and like box is in the viewport?
Also, is it possible to do it without any plugins nad possibly without jquery, i. e. using only pure javascript?
Here is the mentioned code:
/**
* check if facebookHolder is in viewport, and then load Like Box widget
*/
$(document).ready(function() {
function checkScrollingForWidget(event) {
$('#facebookHolder:in-viewport').each(function() {
$('#facebookHolder').append('<div id="fb-root"></div>');
$('#facebookHolder').append('<fb:like-box href="http://www.facebook.com/forexagone" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
FB.init({status: true, cookie: true, xfbml: true});
});
$(window).unbind('scroll', checkScrollingForWidget);
}
$(window).bind('scroll', checkScrollingForWidget);
});
Since Facebook's like box is so widely used and can slow down page loading a bit (even if it's async.), I was quite surprised to see that there are no newer tutorials how to do this. Is it possible at all?
Thank you in advance for your ideas.
This is Markus' code in a simple HTML document:
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Lazy Load</title>
<script src="http://code.jquery.com/jquery-git.js" type="text/javascript"></script>
<script src="http://www.appelsiini.net/download/jquery.viewport.js" type="text/javascript"></script>
<style type="text/css">
.facebookHolder {
height: 50px;
background: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});
</script>
</head>
<body>
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
</body></html>
You can add a Facebook widget any time dynamically, but you need call FB.XFBML.parse after adding it to the DOM.
This could be inteteresting for me too so I just fixed the tutorial script:
JSFiddle
Of course you need to import jquery and the viewport plugin (if you want to use it).
<script src="jquery.js"></script>
<script src="jquery.viewport.js"></script>
Then include fbroot tag only once and give the holders an specific data-url attribute because loading one url multiple times doesn't seem to be possible. Late we will read out this data-attribute.
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
Then use the following jQuery code:
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});
I am new in jquery. my task in jquery is "ImgAreaSelect"
I am trying this from morning but not achive the goal. please review my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
<script>
$(document).ready(function () {
$('#ladybug_ant').imgAreaSelect({
handles: true,
onSelectEnd: function(img, selection){
if (!selection.width || !selection.height){
return;
}
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
});
});
</script>
</head>
<body>
<img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</body>
</html>
You seem to be missing the plugin itself that you have to download from http://odyniec.net/projects/imgareaselect/
jQuery is just the Core and does not include an image area select method
After loading the plugin you will be able to use $('#ladybug_ant').imgAreaSelect({ .. });
This is an example http://jsfiddle.net/8TwRJ/
I also face this problem.I made some changes in Css and Bingo,It is resolved.
Actully the parent div position should be relative to make imagearea scrollable.
You has to define the "parent:"imgParentDivID"" and set position:relative of that div.
It will work perfectly.
Code:
<div id="imgParentDivID" style="position:relative">
<img id="imgID" src="http://jotform.org/demo/jquery-image-area-select- plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</div>
$("#imgID").imgAreaSelect({
parent: "#imgParentDivID",
aspectRatio: '1:1',
handles: true,
fadeSpeed: 200,
selectionOpacity: 1,
onSelectChange: preview
});
I hope this will help you.
you have used script tag for the css link. Use "link" tag instead of "script" tag also i.e use
<link rel="stylesheet" type="text/css" href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"/>
instead of
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
this will solve the issue without any further changes.
I am trying to implement smooth div scroll, the "Clickable Logo Parade" in particular: http://www.smoothdivscroll.com/clickableLogoParade.html
And I got it working in a blank page perfectly exactly the way I want it to, but when I insert it in my current layout it doesnt work properly.. I am assuming something is interfering with it?
Any help?
This is what I added into my css:
#logoParade
{
width: 628px;
height: 75px;
position: relative;
}
#logoParade div.scrollableArea a
{
display: block;
float: left;
padding-left: 10px;
}
This is the jQuery I have added:
<script type="text/javascript">
$(document).ready(function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
</script>
And these documents im including:
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<!-- Latest version (3.0.6) of jQuery Mouse Wheel by Brandon Aaron
You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- jQuery Kinectic (1.5) used for touch scrolling -->
<script src="js/jquery.kinetic.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.3 minified-->
<script src="js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
As well as of course actual jquery..
I uploaded me trying to implement it here you can have a look:
http://www.mintystudios.co.uk/clients/naghmeh/
And here is working version in a blank page..:
http://www.mintystudios.co.uk/clients/naghmeh/1/
Anyone know why it isnt working in the implemented version?
This should solve your problem; replace it with your script.
<SCRIPT type="text/javascript">
jQuery(function ($) {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
</SCRIPT>
How would you make a JQuery popup Note ? This is what I currently have,
Note Code Example
<html>
<head>
<script type="text/javascript" src="jquery.js"> </script>
<style type="text/css" rel="stylesheet">
#popup {
border: 1px solid black;
width: 400px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".HoverMe").mouseenter(function() {
var left = $(".HoverMe").position().left;
var top = $(".HoverMe").position().top;
$("body").append("<div id=\"popup\"> </div>");
$("#popup").css("left",left);
$("#popup").css("top",top);
$("#popup").append("<p> Hello World </p>");
});
$(".HoverMe").mouseleave(function() {
$("#popup").fadeout("fast");
});
});
</script>
</head>
<body>
<div class="HoverMe">
Hover Me
</div>
</body>
</html>
Thats not what I wanted, i wanted something like when you hover some text, it displays a popup with some text. The popup is then aligned center of the text if that makes sense.
Any examples would be useful,
Thank you!
How about using someone else's code for this? I recommend tipsy.
Have a look here. It's not jQuery, although arguably it's an easier technique than jQuery:
http://sixrevisions.com/css/css-only-tooltips/