I am making a desktop-like website, and I want to drag my windows around. I am using jQuery-UI and .draggable(). My current code looks like this:
<div id="window"> <!-- You'll drag this whole div -->
<div id="title">Window name</div> <!-- You drag with this -->
<div id="content"></div> <!-- You cannot drag this -->
</div>
And with my JS I just did this:
$("#window").draggable();
I want this because I need to select text from #content, which is hard to do if it's draggable.
The code I think should be...
$("#content").draggable('disable');
There was a similar question to this here... jquery disable dragging
I guess you need this
$("#window").draggable({ handle: "title" });
Related
I was wondering for the popover given by bootstrap I have the following thing -
<img src="femaleprofilepicture2.jpg" class="img-polaroid">
As of now when I click on the image I get both Co-President and sample#uic.edu on the same line. How do I make them appear on different lines.
Thanks
One way you can do this is by making the bootstrap popover content an html and setting html to true and provide a <br/> in between:
data-content="Co-President <br/> sample#uic.edu" and data-html="true"
i.e:
<img src="femaleprofilepicture2.jpg" class="img-polaroid"/>
Fiddle
But it is always better to create the html content separately and populate it in the popover via the options.
Something like this:
HTML:
<img src="femaleprofilepicture2.jpg" class="img-polaroid"/>
<div class="mycontent"> <!-- Here i define my content and add an attribute data-contentwrapper t0 a selector-->
Co-President <br/>
sample#uic.edu
</div>
JS:
$('[rel=popover]').popover({
html:true,
placement:'bottom',
content:function(){
return $($(this).data('contentwrapper')).html();
}
});
Fiddle
Only this much now: I'm creating a vcard design for myself. My motivation is to make it look as good as possible. I want to apply to a webdesign company with this vcard to get a professional education for webdesign.
I still have a lot to change till it completely fulfills in my requirements, but this is my current version of the design I just uploaded to get you an overview over the design.
So as you can see it's focused on retro, vintage, ribbons and scetch elements.
Right know I want to get rid of these jerking content refreshs. So I thought a dynamic content swap via ajax and jQuery would be the best way to do it.
I never did much with js or actually ajax.
I want to ask you guys about a solution you think benefits in my design. I was thinking about something smoothly.
The content which needs to be changed is placed in
<nav>
(...)
<ul class="ribbon s"><!--Following links got the class="ribbon b/p/l/k"-->
<li class="ribbon-content">Link</li>
<!--
?content=blog
?content=portfolio
?content=lebenslauf
?content=kontakt
-->
</ul>
(...)
</nav>
<section id="content">
<div class="con clearfix">
(...)
</div><!--An empty div for possibly swapping without touching the vintage paper thing -->
</section>
http://robert-richter.com/boilerplate/
for example use jquery.
first add jquery to your html. within the domready-event you can register click events on your ribbon-menue. on each click you load the div-content from the given link-url in the html-part.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$.ready(function(){
$(".ribbon-content a").on("click", function(event){
event.preventDefault();
$(".con").load($(event.target).attr("href"), function(){
// add code after loading - for example change classes of menue
})
});
})
</script>
additionly you can the the browser-history to enable the prev- and next-buttons of the browser.
Be gentle I am new to this web dev game. I'm just trying to learn.
CODE:
<h4>Monday</h4>
<div id="first_accordian">
<h5>First Section</h5>
<div>
Some stuff.
</div>
<h5>Second Section</h5>
<div>
Some stuff.
</div>
</div>
<h4>Tuesday</h4>
<div id="second_accordian">
<h5>First Section</h5>
<div>
Some stuff.
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("[id$=_accordian]").accordion({ collapsible: true, active: false });
});
</script>
Obviously this is just a simplification of a partial view I have in and ASP.NET MVC3 app. But I am using jQuery UI and the accordion widget, so you will need to reference those for the code above to work.
QUESTION:
I have an issue here that when I expand an accordion element it will overlay any HTML underneath it. The behaviour I want is that I have a set of stacked accordions that all shift up or down when any element is selected in any of the accordions.
Does anyone know how I can do this with stacked accordions? Or thinking laterally. Is there any way I can add static headers that aren't accordion elements inline to the accordion (show above as the headers above each accordion; Monday, Tuesday)?
Is there are resizing event of something I should bind to? I'm at a loss as to where to start, any pointers welcome!
EDIT: Have just copied my own code into a file to check and experiment... and it works exactly how I need it to. But it doesn't in my app. So I'm guessing this must be down to something else going on outside of my code.
So... New question: What could stop something from resizing and creating this overlay problem?
I am using JS based Drag Slider DragDealer. The slider div is placed in a content slider that runs using jQuery. The Drag Slider works as long as its parent div is not animated to move to left by 200px.
Fiddle: http://jsfiddle.net/gentrobot/9b5Xg/3/
HTML:
<div style="position:relative;width:400px;height:100px;overflow:hidden;">
<div id="1" style="width:200px;float:left;position:absolute;left:0px;">
Test
</div>
<div id="2" style="width:200px;float:left;position:absolute;left:200px;">
<!-- Drag Slider div starts -->
<div id="my-slider" class="dragdealer">
<div class="red-bar handle">drag me</div>
</div>
<!-- Drag Slider div ends -->
</div>
</div>
Click to slide
jQuery(other than JS for Dragdealer):
$('#clk').click(function(){
$('#1').animate({left:'-200px'});
$('#2').animate({left:'0px'});
});
It works if you drag it to the right long enough, where it used to be before.
What you can have though is specifying a callback parameter that reinitializes the thing.
$('#2').animate({left:'0px'}, function(){
new Dragdealer('my-slider');
});
Normally you should append the element back again to avoid having the same listeners more than once. This is influenced by the way the plugin was written but you can do it like this just to be on the same side.
$('#2').animate({left:'0px'}, function(){
var t = $(this);
var random_placeholder = $('<div></div>').insertBefore(t);
$(this).insertAfter(random_placeholder);
random_placeholder.remove();
new Dragdealer('my-slider');
});
I'm trying to add a jquery zoom plugin within a turn.js magazine flipping effect. I've got them both working separately, but can't get the zoom effect within each magazine page like I'd want. Some of the code is below. All ideas are appreciated, thanks.
<!-- Zoom script -->
<script src='jquery.zoom.js'></script>
<script>
$(document).ready(function()
{
$('#ex1').zoom();
});
</script>
<!-- Zoom html -->
<span class='zoom' id='ex1'>
<img src='pages/daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
</span>
<!-- Magazine html -->
<div id="magazine">
<div style="background-image:url(pages/01.jpg);">
</div>
<div style="background-image:url(pages/02.jpg);">
</div>
<div style="background-image:url(pages/03.jpg);">
</div>
in similar situations i used successfully anythingZoomer
it makes easy to zoom arbitrary html elements, given taht a bit of tweaking is needed in order to suit your needs