I am using jquery dialog with query ui 1.8.7.custom.min.js
I need to customize the buttons on the the dialog and the location where they show up on the dialog. I was able for the most part to customize my dialog box but customizing buttons and its location had been tough cookie so far.
Please find screen shots and code below
HTML:
<style>
.ui-dialog, .ui-dialog-content {
border:1px solid #cde68c;
border-bottom:0px;
background-color: white !important;
color: #333;
font: 12px/180% Arial, Helvetica, sans-serif;
}
.ui-dialog-titlebar {
display:none;
}
#ui-dialog-title-dialog {
color: yellow !important;
text-shadow: none;
}
.ui-dialog-buttonpane {
border:1px solid #cde68c;
border-top:0px;
margin-bottom: 1%;
}
</style>
<div id="dialog">
<p><span id="emailNotice"></span></p>
</div>
Javascript:
$j(document).ready(function() {
$j('#dialog').dialog('open');
$j('#emailNotice').html('show some notice text abcd');
$j('#dialog').dialog({
modal:true,
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$j(this).dialog("close");
},
"Cancel": function() {
className: 'cancelButtonClass',
$j(this).dialog("close");
}
}
});
});
I want to be able to position buttons left , right , top / bottom etc
You can always pass an empty object for the buttons property. You would then add your buttons directly in your "dialog" div. Of course, this would mean you'd have to handle the button click events manually.
Rough example:
<div id="dialog">
<p><span id="emailNotice"></span></p>
<button id="myButton">Submit</button>
</div>
Javascript:
$j('#dialog').dialog({
modal:true,
autoOpen: false,
width: 600,
buttons: {}
}
});
<!-- language: lang-js -->
buttons: [
{
text: "Delete that",
className: 'deleteButtonClass',
click: function() {
alert('foobar');
}
}
Find in jquery-ui-1.10.0.custom.css the class bellow and remove float: right;
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}
Tested in jquery-ui-1.10.0.custom.css not in jquery-ui-1.8.7.custom.css
Related
Using the normal implementation of JQuery UI slider with this code:
$(function() {
$('.slider').slider();
});
JQuery UI only creates the surrounding slidable area, and then the handle to drag. Does anyone have experience extending this add an secondary element that shows where the user has dragged to? What I want to achieve is to have a two colour draggable area, either side of the handle.
You can add divs in the slider and update their size on slide event. Like this:
$('.slider').slider({
max: 100,
min: 0,
slide: function (e, ui) {
$('.left-side').css('width', $(ui.handle).position().left)
$('.right-side').css('width', $(e.target).width() - $(ui.handle).position().left)
}
});
$('.left-side').css('width', '0px');
$('.right-side').css('width', $('.slider').width())
.slider div {
position: relative;
height: 100%;
}
.left-side {
background-color: aliceblue;
left: 0px;
width: 200px;
float: left;
}
.right-side {
background-color: bisque;
width:200px;
float: left;
}
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class='slider'>
<div class="left-side"></div>
<div class="right-side"></div>
</div>
I'm using jQuery-UI v1.11.2 in order to create some draggable and droppable divs, and Boostrap 3.1.1 as well.
I'd like to know why a Boostrap column class is interfering with the draggable "hint".
In other words, as I drag an image from my Gallery div to my Dashboard div, the Dashboard div comes in FRONT of the image hint. Then once I DROP my image on the Dashboard div, the image re-appears.
If I remove the col-md-8 class from the Dashboard div, this problem goes away.
Here are two screen shots to demonstrate:
1) WITHOUT the Bootstrap column class on the right div (image hint looks good)
2) With the Bootstrap column class on the right div (image hint disappears)
Here's the HTML code :
<section id="gadgets-view" class="mainbar" data-ng-controller="gadgets">
<div class="container-fluid">
<div class="row-fluid">
<!-- based on http://jqueryui.com/droppable/#photo-manager -->
<div class="ui-widget ui-helper-clearfix col-md-4"> <-- GALLERY OF WIDGETS -->
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Tree Grid</h5>
<img src="images/treegrid.jpg" alt="Hierarchy Grid" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Area Chart</h5>
<img src="images/chart_area.jpg" alt="Area Chart" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Bar Chart</h5>
<img src="images/chart_bar.png" alt="Bar Chart" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Column Chart</h5>
<img src="images/chart_column.png" alt="Column Chart" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Line Chart</h5>
<img src="images/chart_line.png" alt="Line Chart" width="96" height="72">
</li>
</ul>
</div>
<div class="col-md-8">
<div id="dashboard" class="ui-widget-content ui-state-default "> <-- DROPPABLE DASHBOARD -->
<h4 class=""><span class="ui-icon ui-icon-image"></span>Dashboard</h4>
</div>
<div>
</div>
</div>
</section>
The CSS :
<style>
.ui-widget-header{
font-size: 65%;
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
}
.ui-state-highlight {
border: 2px dashed #d3d3d3; /* override to show dashed border when dragging */
}
#gallery {
float: left;
width: 75%;
min-height: 12em;
}
.gallery.custom-state-active {
background: #eee;
}
.gallery li {
list-style: none;
float: left;
width: 96px;
padding: 0.4em;
margin: 0 0.4em 0.4em 0;
text-align: center;
}
.gallery li h5 {
margin: 0 0 0.4em;
cursor: move;
}
.gallery li a {
float: right;
}
.gallery li a.ui-icon-zoomin {
float: left;
}
.gallery li img {
width: 100%;
cursor: move;
}
#dashboard {
float: left;
width: 45%;
height:500px;
padding: 1%;
}
#dashboard h4 {
line-height: 25px;
margin: 0 0 0.4em;
}
#dashboard h4 .ui-icon {
float: left;
}
#dashboard .gallery h5 {
display: none;
}
The JavaScript to create drag/drop areas :
<script>
$(function () {
// there's the gallery and the dashboard
var $gallery = $("#gallery"),
$dashboard = $("#dashboard");
// let the gallery items be draggable
$("li", $gallery).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the dashboard be droppable, accepting the gallery items
$dashboard.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function (event, ui) {
debugger;
deleteImage(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the dashboard
$gallery.droppable({
accept: "#dashboard li",
activeClass: "custom-state-active",
drop: function (event, ui) {
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Remove gadget' class='ui-icon ui-icon-minus'></a>";
function deleteImage($item) {
$item.fadeOut(function () {
var $list = $("ul", $dashboard).length ?
$("ul", $dashboard) :
$("<ul class='gallery ui-helper-reset'/>").appendTo($dashboard);
//$item.find("a.ui-icon-dashboard").remove(); // DO NOT REMOVE ORIGINAL WIDGET ICON - 11/19/2014 BM:
$item.append(recycle_icon).appendTo($list).fadeIn(function () {
//$item.animate({ width: "48px" }).find("img").animate({ height: "36px" });
$item.animate().find("img").animate();
});
});
}
// image recycle function
var dashboard_icon = "<a href='link/to/dashboard/script/when/we/have/js/off' title='Add this gadget' class='ui-icon ui-icon-plus'</a>";
function recycleImage($item) {
$item.fadeOut(function () {
$item
.find("a.ui-icon-refresh")
.remove()
.end()
.css("width", "96px")
.append(dashboard_icon)
.find("img")
.css("height", "72px")
.end()
.appendTo($gallery)
.fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr("href"),
title = $link.siblings("img").attr("alt"),
$modal = $("img[src$='" + src + "']");
if ($modal.length) {
$modal.dialog("open");
} else {
var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
.attr("src", src).appendTo("body");
setTimeout(function () {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// resolve the icons behavior with event delegation
$("ul.gallery > li").click(function (event) {
var $item = $(this),
$target = $(event.target);
if ($target.is("a.ui-icon-dashboard")) {
deleteImage($item);
} else if ($target.is("a.ui-icon-zoomin")) {
viewLargerImage($target);
} else if ($target.is("a.ui-icon-refresh")) {
recycleImage($item);
}
return false;
});
});
I found the problem you describe (but i did not found a relation with the Bootstrap Grid Classes).
For my the problem seems to be related to the z-index and can be solved by adding the following style rules at the end of your CSS code:
.ui-draggable-handle {
z-index: 1;
}
I created a simple js banner.
First a company name will run into the center from left and then fading in an image logo
html
<div id="banner-container">
<div id="companyname"><p>P.Classique Trading Co. Ltd.</p></div>
<div id="logo"><img src="img/twitter_logo.png" width="100" height="100" /></div>
</div>
css
#banner-container {
position:relative;
left:300px;
top:100px;
overflow: hidden;
display:box;
background-color: #282800;
width:500px;
height:300px;
color:#FFFFFF;
}
#companyname {
position: relative;
color:yellow;
top:15px;
left:-500px;
font-family: 'Finger Paint', cursive;
}
#logo {
position: relative;
display:none;
top:50px;
left:200px;
}
js
$(document).ready(function() {
var left = $('#companyname').offset().left;
$("#companyname").css({left:left}).animate({"left":"120px"}, {duration:1000, easing:'easeOutBounce'});
$("#logo").fadeIn(1500);
}
);
the result is two animations start at the same time which is not I want to.
Working jsFiddle Demo
Use a callback for your animation:
$("#companyname")
.css({left:left})
.animate(
{"left":"120px"},
{
duration:1000,
easing:'easeOutBounce',
complete: function () {
$("#logo").fadeIn(1500);
}
}
);
Try this fiddle: http://jsfiddle.net/KhsWt/
You can use the second fadein as parameter for when first one finishes
$(document).ready(function() {
var left = $('#companyname').offset().left;
$("#companyname").css({left:left}).animate({left:"120px"}, 1000, 'easeOutBounce',
function() {
$("#logo").fadeIn(1500);
}
)});
I want to know where to put javascript file in ruby on rails.
I am using jQuery dialogue box in my app. All jQuery and CSS files I put under assets/javascripts and assets/stylesheets.
Now I have some JavaScript code in my view page that is "my_event". Where to put this JavaScript code?
I googled for this and found something that suggested to make a my_event.js file and put this file inside the views/useraccount directory.
Seeking your valuable suggestion.
Controller useraccount.rb
View my_event.html.erb
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header : {
left : 'prev,next today',
center : 'title',
right : 'month,agendaWeek,agendaDay'
},
// US Holidays
events : '/useraccount/my_event',
eventClick : function(event) {
// alert (JSON.stringify(event,null,4)); return false;
if (event.description) {
var a = '<button onclick="addToMycal(' + event.id + ')">UnJoin</button>'
$("#Successmes").empty();
$('#event-desc').html(event.description);
$('#add-to-my-cal').html(a)
$("#dialog-modal").dialog({
height : 350,
width : 600,
modal : true,
buttons : {
Ok : function() {
$(this).dialog("close");
}
}
});
} else {
$('#event-desc').html("<h4>Oops!</h4> No Data Available");
$("#dialog-modal").dialog({
height : 300,
width : 363,
modal : true,
buttons : {
Ok : function() {
$(this).dialog("close");
}
}
// alert (event.description);
});
}
},
});
});
</script>
<script>
function addToMycal(val) {
$.getJSON("/useraccount/delete_event?d=" + val, function(data) {
// alert (JSON.stringify(data,null,4)); return false;
$("#Successmes").empty();
$("#event-desc").html(data.msg)
$("#add-to-my-cal").remove();
});
}
</script>
<style>
#calendarbody {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
background-color: #E7EAF6;
}
</style>
<div id="calendarbody">
<div id='calendar'></div>
</div>
<div id="dialog-modal" title=" Event Description">
<p id="event-desc"></p>
<div id="add-to-my-cal"></div>
<p id="Successmes"></p>
</div>
Keep it in assets/javascripts folder and cross check for if you have written "require_tree ." That's it.
This will be available on every page...
Put it in assets/javascripts folder, and require it in your application.js file. If your application.js file has require_tree ., no need to require your js file again.
I'm pretty new when it comes to jQuery so I need someone with a little more experience to help me out. I have a Nav with 3 items - Work About Contact
By default I have work selected but I would like it to change the active class to which ever is clicked. I have anchor scrolling working but I would like to have it highlight to the correct nav item when clicked. Also if it is possible when scrolling down the page and getting to the next section for it to change highlight automatically.
This is the jQuery I am using for the anchor scrolling.
<script>$(function() {
var main-nav = $("#main-nav"), pos = main-nav.offset();
$(window).scroll(function() {
if($(this).scrollTop() > (pos.top + 10) && $(this).scrollTop() < 15000 && main-nav.css('position') == 'static') { main-nav.addClass('fixed'); }
else if($(this).scrollTop() <= pos.top && main-nav.hasClass('fixed')){ main-nav.removeClass('fixed'); }
else if($(this).scrollTop() > 15000 && main-nav.hasClass('fixed')){ main-nav.removeClass('fixed'); }
})
});
</script>
<script>$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
</script>
Here is the CSS
#main-nav{
font: bold 12px 'Bitter', serif;
width: 145px;
float: right;
}
#main-nav li{
float: left;
list-style: none;
margin: 10px 2px 0 2px;
color: #c4c5c5;
}
#main-nav li:last-child{
margin-right: 0;
}
#main-nav a{
text-decoration: none;
color: #c4c5c5;
}
#main-nav a:hover{
text-decoration: none;
color: #919292;
}
#main-nav a.active{
color: #919292;
}
Here is the HTML
<div id="main-nav" class="">
<ul class="nav">
<li><a class="active" href="#work">Work</a></li>
<li>/</li>
<li>About</li>
<li>/</li>
<li>Contact</li>
</ul>
</div>
If someone could help me out I would really really appreciate it!
Since you are using the active class to specify which anchor should be highlighted, you just need to make sure that the correct anchor has that class. Fixing that when the nav items are clicked is straightforward, in your $('ul.nav a').bind add:
$('ul.nav a').removeClass('active');
$(this).addClass('active');
Here is a jsbin.
To highlight the nav's as the page is scrolled you would just compare the scrollTop for the page with the offsets of elements in the DOM...similar to your current code in $(window).scroll.