|
Would jquery blur() function assist you? I added this to your code and it functions:
$('.slide-out-div').click(function() {
$('.slide-out-div').blur();
});
$('.slide-out-div').blur(function() {
alert('Handler for .blur() called.');
});
vbmike
|
|
|
|
|
thanks 
tbhattacharjee
|
|
|
|
|
You are welcome, I hope it works for you.
vbmike
|
|
|
|
|
Is there a way to convert a html to pdf file, without making a call to the server ?
|
|
|
|
|
Can you explain more why you don't want to go to the server?
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
The thing is that the app we are creating is targeting the mobile phones(read iPhones). We do not want any network issues. So we are wanting to do as much as possible on the client side itself. Of course if there is no other option we will make a server call.
|
|
|
|
|
|
I'm kind of baffled here. This is a script that came in a customer project. I thought I fixed it, but when I run it, the slide counter goes 0 then 3 then 2 instead of 0 1 2
$(document).ready(function () {
var slideContainer = $('[id*="_slideshow_container"]');
var slidesHolder = $(slideContainer).children();
var slideWidth = $(slideContainer).width();
var slides = $(slidesHolder).children();
var slidePos = 0;
var slideTotal = slides.length;
var currentSlide = 0;
var delay = 5000;
var slideTime = 1000;
$(slideContainer).css({
"overflow": "hidden",
"position": "relative"
});
$(slidesHolder).css({
"position": "absolute",
"top": "0px",
"left": "0px"
});
for (var i = 0; i < slides.length; i++) {
$(slides[i]).css({
"position": "absolute",
"top": "0",
"left": slidePos + "px"
});
slidePos = slidePos + slideWidth;
}
$(slidesHolder).css('width', slidePos + slideWidth);
$(slides).first().clone().css({
"left": slidePos + "px"
}).appendTo(slidesHolder);
animate();
function animate() {
$('[id*="_lbl_SS_Collapse"]').text(currentSlide);
$(slidesHolder).delay(delay).animate({
left: "-=" + slideWidth
}, slideTime, function () {
if (currentSlide < slideTotal) {
currentSlide++;
animate();
}
else {
$(slidesHolder).css({
"left": "0px"
});
currentSlide = 0;
animate();
}
});
}
});
|
|
|
|
|
OK I get it now. The Javascript runs full speed until complete, but the delay in the animation function drags behind the execution of the code, so You can never really detect the end of the animation loop.
So for now, I'll just loop through some marketing messages, and then stop
I put a for loop in the function instead
function animate() {
for (var i = 0; i < slideTotal - 1; i++) {
$(slidesHolder).css({
'left': '0px'
});
$(slidesHolder).delay(delay).animate({
"left": "-=" + slideWidth
}, slideTime, 'swing', function () {
});
}
}
|
|
|
|
|
$(document).ready(function () {
load_DisplayAdvertising_Horizontal();
});
function load_DisplayAdvertising_Horizontal() {
var view_Width = 980;
var view_Height = 250;
var view_Time = 4000;
var ease_Time = 1400;
var child_Count = parseInt($('[id*="_slide_container"]').children().length);
$('[id*="_slide_container"]').css({
"position": "relative",
"width": view_Width + "px",
"height": view_Height + "px",
"overflow": "hidden"
});
var fsWidth = 0;
var fsHeight = 0;
$('[id*="_slide_container"]').find("._slide_child").css({
"display": "inline",
"position": "relative",
"float": "left",
"top": "0px",
"left": "0px"
}).each(function (index) {
fsWidth = fsWidth + parseInt($(this).css("width"));
if (fsHeight < parseInt($(this).css("height"))) {
fsHeight = parseInt($(this).css("height"));
}
})
var div_filmStrip = document.createElement("div");
div_filmStrip.style.textAlign = "left";
div_filmStrip.style.width = fsWidth + "px";
div_filmStrip.style.height = fsHeight + "px";
div_filmStrip.style.position = "relative";
div_filmStrip.style.left = "0px";
div_filmStrip.style.top = "0px";
var temp_InnerHTML = $('[id*="_slide_container"]').html();
div_filmStrip.innerHTML = temp_InnerHTML;
$('[id*="_slide_container"]').empty();
$('[id*="_slide_container"]').append(div_filmStrip);
run_DisplayAdvertising_Horizontal(
div_filmStrip,
fsWidth,
view_Width,
child_Count,
view_Time,
ease_Time
);
}
function run_DisplayAdvertising_Horizontal(obj, cW, vW, cC, vT, eT) {
if (cC > 0)
{
var fsWidth = parseInt(cW - vW);
var fsRewind = parseInt(vT / cC);
for (var i = 0; i < cC-1; i++)
{
$(obj).delay(vT).animate({
left: '-=' + vW
}, eT, "linear", function () {
var fsPosition = parseInt($(obj).css("left"));
if (fsPosition == -fsWidth) {
$(obj).delay(vT).animate({
left: '0px'
}, fsRewind, "linear", function () {
run_DisplayAdvertising_Horizontal(obj, cW, vW, cC, vT, eT);
});
}
});
}
}
}
The HTML Side
<div id="_slide_container" style="width: 980px; height: 254px; text-align: center; margin: 0px auto; display: block;">
<div id="slideChild_0" class="_slide_child" style="width: 980px; height: 250px; display: block;">
<asp:Image ID="img_slideshow_child_0" runat="server"
ImageUrl="~/EN-US/images/SlideShows/SS_StrategyPlanning_980x250.png" />
</div>
<div id="slideChild_1" class="_slide_child" style="width: 980px; height: 250px; display: none;">
<asp:Image ID="img_slideshow_child_1" runat="server"
ImageUrl="~/EN-US/images/SlideShows/SS_WebDesign_980x250.png" />
</div>
<div id="slideChild_2" class="_slide_child" style="width: 980px; height: 250px; display: none;">
<asp:Image ID="img_slideshow_child_2" runat="server"
ImageUrl="~/EN-US/images/SlideShows/SS_WebDevelopment_980x250.png" />
</div>
<div id="slideChild_3" class="_slide_child" style="width: 980px; height: 250px; display: none;">
<asp:Image ID="img_slideshow_child_3" runat="server"
ImageUrl="~/EN-US/images/SlideShows/SS_HKB_Project_2_980x250.png" />
</div>
<div id="slideChild_4" class="_slide_child" style="width: 980px; height: 250px; display: none;">
<asp:Image ID="img_slideshow_child_4" runat="server"
ImageUrl="~/EN-US/images/SlideShows/SS_InternetCommerceEngine-5_980x250.png" />
</div>
</div>
|
|
|
|
|
With a bit more detailed description this would be worth posting[^] as a Tip/Trick. It will soon get lost here, whereas Tips & Tricks and Articles can be searched and browsed quite easily.
One of these days I'm going to think of a really clever signature.
|
|
|
|
|
I thought about that last night, but sure if it was worthy of it, or if the code was clean enough. But based on the quality I usually see here, I should not doubt myself.
Thanks, this will be my first publish here on CJ
|
|
|
|
|
jkirkerx wrote: if it was worthy of it
Only one way to find out.
One of these days I'm going to think of a really clever signature.
|
|
|
|
|
Why some java script run under tag only just lick following code
<body>
<form id="form1" runat="server">
<p id ="Demo0">
A pragraph
</p>
<div id="Demo1">
B Pragraph
</div>
<p id="demo">A Paragraph.</p>
<div id="myDIV">A DIV.</div>
</form>
<script type ="text/javascript">
document.getElementById("Demo0").innerHTML = "My Javascript Page0";
document.getElementById("Demo1").innerHTML = "My Javascript Page1"
</body>
|
|
|
|
|
And what's the question?
ProgramFOX
|
|
|
|
|
Please be more clear. I cannot understand what you are asking.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
sir i am just asking to you following java script run under body tag why he cant run out side body tag
<body>
<form id="form1" runat="server">
<p id ="Demo0">
A pragraph
</p>
<div id="Demo1">
B Pragraph
</div>
<p id="demo">A Paragraph.</p>
<div id="myDIV">A DIV.</div>
</form>
<script type ="text/javascript">
document.getElementById("Demo0").innerHTML = "My Javascript Page0";
document.getElementById("Demo1").innerHTML = "My Javascript Page1"
</script>
</body>
|
|
|
|
|
Actually, you should put the script tag in the head tag.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
You will need to change the contents of the divs AFTER the page loads.
vbmike
|
|
|
|
|
hey guys..So I am using datepicker http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.htmlto select start and end dates.I have the controller coded so that if the user attempts to select a date from the calendar (which is already stored for them-from a previous selection) it will not add it to the DB. I also have the weekends blocked out so they cant be used (done using
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerCustomCellRender.html)
E.g say the user has previously selected fri 14th and added it to the DB, if they try to make a new record selecting from thur 13th to mon 17th- only thur 13, and mon 17th will be added to the DB. As fri 14th was previously added and 15 and 16th are weekendsone using the following code:
[HttpPost] public ActionResult listHolidays(Holiday holiday, int? PersonId, string HolidayDate, string endDate, string AlreadyExists)
{ DateTime startDates = Convert.ToDateTime(HolidayDate);
DateTime endDates = Convert.ToDateTime(endDate);
while (startDates <= endDates)
{
if (startDates.DayOfWeek != DayOfWeek.Saturday && startDates.DayOfWeek != DayOfWeek.Sunday)
{
ViewBag.CantDuplicateHolidays = String.IsNullOrEmpty(AlreadyExists) ? "date" : "";
var dates = from d in db.Holidays
where d.HolidayDate == startDates && d.PersonId == PersonId
select d;
if (dates.Count() <= 0)
{
Holiday holiday1 = new Holiday();
holiday1.PersonId = PersonId.Value;
holiday1.HolidayDate = startDates;
db.Holidays.AddObject(holiday1);
db.SaveChanges();
}
}
startDates = startDates.AddDays(1);
}
return RedirectToAction("Index");
}
---------------
my view
Date.format = 'dd/m/yyy';
$("#HolidayDate").addClass('date-pick');
$("#endDate").addClass('date-pick');
//$('.date-pick').datePicker//({dateFormat: 'dd-mm-yy'}).val();
// clickInput: true
$(function () {
//3 methods below dont allow user to select weekends
$('.date-pick').datePicker(
{
createButton: false,
renderCallback: function ($td, thisDate, month, year) {
if (thisDate.isWeekend()) {
$td.addClass('weekend');
$td.addClass('disabled');
}
}
}
)
.bind('click',
function () {
$(this).dpDisplay();
this.blur();
return false;
}
)
.bind('dateSelected',
function (e, selectedDate, $td) {
console.log('You selected ' + selectedDate);
}
);
// HolidayDate is start date
$('#HolidayDate').bind('dpClosed',
function (e, selectedDates) {
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#endDate').dpSetStartDate(d.addDays(0).asString());
}
}
);
//end date is end date
$('#endDate').bind('dpClosed',
function (e, selectedDates) {
var d = selectedDates[0];
if (d) {
d = new Date(d);
$('#HolidayDate').dpSetEndDate(d.addDays(0).asString());
}
}
);
});
can any suggest how to disable a date on the calendar if it is already in the DB
|
|
|
|
|
our company has web site called http://www.bba-reman.com. i tried to put the sliding behavior on the left side of our web site but the div is not showing properly when page load and when we click on expand button then nothing happen. here is the sample code of tabslideout plugin.
when i add the above script in blank page then it works fine but when i add this code in our live site then it didn't work properly.
may be i put the div called "slide-out-div" in wrong div or in wrong place. so it is my request please go to our website http://www.bba-reman.com and inspect the page structure with firebug or by any other tool and tell me how could i setup the above script as a result feedback button should come at left and when user click on feedback button then div called "slide-out-div" should expand. thanks
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript">
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
<style type="text/css">
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
</style>
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
tbhattacharjee
|
|
|
|
|
Did you put your slide-out-div div inside any other divs? Try putting it right before the </body> tag.
|
|
|
|
|
thanks ur tips works
tbhattacharjee
|
|
|
|
|
Hi all,
I'm an old C++ programer who has dabbled in web coding and javascript over the years. Lately I've been trying to get a handle on the mooTools framework for javascript. I'm having a bit of trouble understanding how javascript handles binding, or it may be a mootools binding thing, I'm not sure. Any insight is appreciated.
The following code works:
var myMenu = new Class({
initialize: function(elements, options){
<!-- <snip> -->
this.elements.each(
function(el,i){
var obj = this;
el.addEvent('mouseenter', function(evnt){
obj.menuOpen(i);
});
el.addEvent('mouseleave', function(evnt){
obj.menuOpen(null);
});
}.bind(this)
);
},
menuOpen(evnt, i) {
.... do menu stuff ....
}
<!-- <snip> -->
});
The anonymous function coded in-line with the call to addEvent works properly and my menu items open and close as expected. What I tried, because it looks better to my C++ trained eyes, and to see if I understood things correctly was this:
var myMenu = new Class({
initialize: function(elements, options){
<!-- <snip> -->
mouseEnter: function(evnt, i){
this.menuOpen(evnt, i);
},
mouseLeave: function(evnt){
this.menuOpen(null);
},
this.elements.each(
function(evnt,i){
var obj = this;
el.addEvent('mouseenter', obj.mouseEnter(evnt, i));
el.addEvent('mouseleave', obj.mouseLeave(evnt, i));
}.bind(this)
);
},
menuOpen(evnt, i) {
.... do menu stuff ....
}
<!-- <snip> -->
});
This does not work (nothing happens), yet to me it looks like it should. I'm pretty sure it has to do with binding the functions to the proper object in the addEvent calls (or something) but none of the things I've tried have worked.
If you can give some clues to help me understand what's going wrong here I'd appreciate it.
Thanks,
Steve
|
|
|
|
|
I have a text box andit will accept only time in the format 00:00(maximum value can be 12:59) . If user enter any of the value greater than this that part only needs to become 00. i have the code like this,but it will change the whole value to 00:00 . In the greater than conditions, what i have to write .
function ValidateTimeControl(s, e) {
var isValid = true;
if (e.value != null) {
if (e.value.substring(0, 1).trim() == "" || e.value.substring(1, 2).trim() == "" || e.value.substring(3, 4).trim() == "" || e.value.substring(3, 4).trim() == "") {
isValid = false;
}
else {
var hours = parseInt(e.value.substring(0, 2), 10);
var minutes = parseInt(e.value.substring(3, 5), 10);
if (hours > 12) {alert(hours)
isValid = false;
}
if (minutes > 59) {
isValid = false;
}
}
}
else {
isValid = false;
}
if (!isValid) {
e.value = '00:00';
}
}
Thanks
Rks
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
