Search Results

Search found 1137 results on 46 pages for 'slide'.

Page 18/46 | < Previous Page | 14 15 16 17 18 19 20 21 22 23 24 25  | Next Page >

  • Does Jquery and Mootools usually have conflict if both are used on a webpage? [migrated]

    - by Charming Prince
    I have this website am designing, i tried using mootools 1.31 to animate some of the div boxes when clicked or when the mouse hover rounds it, to shows the content. the thing is that it doesn't seem to work on the webpage, but if i try the same script on a blank webpage it works, am thinking probably it's because i have Jquery 1.52 on the same page and maybe both scripts are conflicting with each other because, if i remove the Jquery, the Mootools works. What should be my option, because i need the Jquery to do some validations for me, so i can't remove it completely. Here are the codes <script> //-vertical var mySlide = new Fx.Slide('test'); $('slidein').addEvent('click', function(e){ e = new Event(e); mySlide.slideIn(); e.stop(); }); $('slideout').addEvent('click', function(e){ e = new Event(e); mySlide.slideOut(); e.stop(); }); $('toggle').addEvent('click', function(e){ e = new Event(e); mySlide.toggle(); e.stop(); }); $('hide').addEvent('click', function(e){ e = new Event(e); mySlide.hide(); e.stop(); }); </script> here's the HTML <html> <h3 class="section">Fx.Slide Vertical</h3> <a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#"> toggle</a> | <a id="hide" href="#">hide</a> <div id="test"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mi nim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> Here's the CSS #test { background: #222; color: #fff; padding: 10px; margin: 20px; border: 10px solid pink; } #test2 { background: #222; color: #fff; padding: 10px; margin: 20px; border: 10px solid pink; } Am using the exact same code supplied by Mootools in their own example, if i do this on a blank webpage it works but incorporated into my own webpage, it doesn't, and my own page just have the script tag of the Jquery in the head section of the HTML.

    Read the article

  • Is this spaghetti code already? [migrated]

    - by hephestos
    I post the following code writen all by hand. Why I have the feeling that it is a western spaghetti on its own. Second, could that be written better? <div id="form-board" class="notice" style="height: 200px; min-height: 109px; width: auto;display: none;"> <script type="text/javascript"> jQuery(document).ready(function(){ $(".form-button-slide").click(function(){ $( "#form-board" ).dialog(); return false; }); }); </script> <?php echo $this->Form->create('mysubmit'); echo $this->Form->input('inputs', array('type' => 'select', 'id' => 'inputs', 'options' => $inputs)); echo $this->Form->input('Fields', array('type' => 'select', 'id' => 'fields', 'empty' => '-- Pick a state first --')); echo $this->Form->input('inputs2', array('type' => 'select', 'id' => 'inputs2', 'options' => $inputs2)); echo $this->Form->input('Fields2', array('type' => 'select', 'id' => 'fields2', 'empty' => '-- Pick a state first --')); echo $this->Form->end("Submit"); ?> </div> <div style="width:100%"></div> <div class="form-button-slide" style="float:left;display:block;"> <?php echo $this->Html->link("Error Results", "#"); ?> </div> <script type="text/javascript"> jQuery(document).ready(function(){ $("#mysubmitIndexForm").submit(function() { // we want to store the values from the form input box, then send via ajax below jQuery.post("Staffs/view", { data1: $("#inputs").attr('value'), data2:$("#inputs2").attr('value'),data3:$("#fields").attr('value'), data4:$("#fields2").attr('value') } ); //Close the dialog $( "#form-board" ).dialog('close') return false; }); $("#inputs").change(function() { // we want to store the values from the form input box, then send via ajax below var input_id = $('#inputs').attr('value'); $.ajax({ type: "POST", //The controller who listens to our request url: "Inputs/getFieldsFromOneInput/"+input_id, data: "input_id="+ input_id, //+"&amp; lname="+ lname, success: function(data){//function on success with returned data $('form#mysubmit').hide(function(){}); data = $.parseJSON(data); var sel = $("#fields"); sel.empty(); for (var i=0; i<data.length; i++) { sel.append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } } }); return false; }); $("#inputs2").change(function() { // we want to store the values from the form input box, then send via ajax below var input_id = $('#inputs2').attr('value'); $.ajax({ type: "POST", //The controller who listens to our request url: "Inputs/getFieldsFromOneInput/"+input_id, data: "input_id="+ input_id, //+"&amp; lname="+ lname, success: function(data){//function on success with returned data $('form#mysubmit').hide(function(){}); data = $.parseJSON(data); var sel = $("#fields2"); sel.empty(); for (var i=0; i<data.length; i++) { sel.append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } } }); return false; }); }); </script>

    Read the article

  • Javascript or CSS hover not working in Safari and Chrome

    - by PAZtech
    I have a problem with a script for a image gallery. The problem seems to only occur on Safari and Chrome, but if I refresh the page I get it to work correctly - weird! Correct function: The gallery has a top bar, which if you hover over it, it will display a caption. Below sits the main image. At the bottom there is another bar that is a reversal of the top bar. When you hover over it, it will display thumbnails of the gallery. The problem: In Safari and Chrome, the thumbnail holder will not display. In fact, it doesn't even show it as an active item (or a rollover). But oddly enough, if you manually refresh the page it begins to work correctly for the rest of the time you view the page. Once you have left the page and return the same error occurs again and you have to go through the same process. Here's one of the pages to look at: link text Here's the CSS: #ThumbsGutter { background: url(../Images/1x1.gif); background: url(/Images/1x1.gif); height: 105px; left: 0px; position: absolute; top: 0px; width: 754px; z-index: 2; } #ThumbsHolder { display: none; } #ThumbsTable { left: 1px; } #Thumbs { background-color: #000; width: 703px; } #Thumbs ul { list-style: none; margin: 0; padding: 0; } #Thumbs ul li { display: inline; } .Thumbs ul li a { border-right: 1px solid #fff; border-top: 1px solid #fff; float: left; left: 1px; } .Thumbs ul li a img { filter: alpha(opacity=50); height: 104px; opacity: .5; width: 140px; } .Thumbs ul li a img.Hot { filter: alpha(opacity=100); opacity: 1; } Here is the javascript: //Variables var globalPath = ""; var imgMain; var gutter; var holder; var thumbs; var loadingImage; var holderState; var imgCount; var imgLoaded; var captionHolder; var captionState = 0; var captionHideTimer; var captionHideTime = 500; var thumbsHideTimer; var thumbsHideTime = 500; $(document).ready(function() { //Load Variables imgMain = $("#MainImage"); captionHolder = $("#CaptionHolder"); gutter = $("#ThumbsGutter"); holder = $("#ThumbsHolder"); thumbs = $("#Thumbs"); loadingImage = $("#LoadingImageHolder"); //Position Loading Image loadingImage.centerOnObject(imgMain); //Caption Tab Event Handlers $("#CaptionTab").mouseover(function() { clearCaptionHideTimer(); showCaption(); }).mouseout(function() { setCaptionHideTimer(); }); //Caption Holder Event Handlers captionHolder.mouseenter(function() { clearCaptionHideTimer(); }).mouseleave(function() { setCaptionHideTimer(); }); //Position Gutter if (jQuery.browser.safari) { gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 89) + "px"); } else { gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px"); } //gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px"); //gutter.css("left", imgMain.offset().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - gutter.height()) + "px"); //Thumb Tab Event Handlers $("#ThumbTab").mouseover(function() { clearThumbsHideTimer(); showThumbs(); }).mouseout(function() { setThumbsHideTimer(); }); //Gutter Event Handlers gutter.mouseenter(function() { //showThumbs(); clearThumbsHideTimer(); }).mouseleave(function() { //hideThumbs(); setThumbsHideTimer(); }); //Next/Prev Button Event Handlers $("#btnPrev").mouseover(function() { $(this).attr("src", globalPath + "/Images/GalleryLeftButtonHot.jpg"); }).mouseout(function() { $(this).attr("src", globalPath + "/Images/GalleryLeftButton.jpg"); }); $("#btnNext").mouseover(function() { $(this).attr("src", globalPath + "/Images/GalleryRightButtonHot.jpg"); }).mouseout(function() { $(this).attr("src", globalPath + "/Images/GalleryRightButton.jpg"); }); //Load Gallery //loadGallery(1); }); function loadGallery(galleryID) { //Hide Holder holderState = 0; holder.css("display", "none"); //Hide Empty Gallery Text $("#EmptyGalleryText").css("display", "none"); //Show Loading Message $("#LoadingGalleryOverlay").css("display", "inline").centerOnObject(imgMain); $("#LoadingGalleryText").css("display", "inline").centerOnObject(imgMain); //Load Thumbs thumbs.load(globalPath + "/GetGallery.aspx", { GID: galleryID }, function() { $("#TitleHolder").html($("#TitleContainer").html()); $("#DescriptionHolder").html($("#DescriptionContainer").html()); imgCount = $("#Thumbs img").length; imgLoaded = 0; if (imgCount == 0) { $("#LoadingGalleryText").css("display", "none"); $("#EmptyGalleryText").css("display", "inline").centerOnObject(imgMain); } else { $("#Thumbs img").load(function() { imgLoaded++; if (imgLoaded == imgCount) { holder.css("display", "inline"); //Carousel Thumbs thumbs.jCarouselLite({ btnNext: "#btnNext", btnPrev: "#btnPrev", mouseWheel: true, scroll: 1, visible: 5 }); //Small Image Event Handlers $("#Thumbs img").each(function(i) { $(this).mouseover(function() { $(this).addClass("Hot"); }).mouseout(function() { $(this).removeClass("Hot"); }).click(function() { //Load Big Image setImage($(this)); }); }); holder.css("display", "none"); //Load First Image var img = new Image(); img.onload = function() { imgMain.attr("src", img.src); setCaption($("#Image1").attr("alt")); //Hide Loading Message $("#LoadingGalleryText").css("display", "none"); $("#LoadingGalleryOverlay").css("display", "none"); } img.src = $("#Image1").attr("bigimg"); } }); } }); } function showCaption() { if (captionState == 0) { $("#CaptionTab").attr("src", globalPath + "/Images/CaptionTabHot.jpg"); captionHolder.css("display", "inline").css("left", imgMain.position().left + "px").css("top", imgMain.position().top + "px").css("width", imgMain.width() + "px").effect("slide", { "direction": "up" }, 500, function() { captionState = 1; }); } } function hideCaption() { if (captionState == 1) { captionHolder.toggle("slide", { "direction": "up" }, 500, function() { $("#CaptionTab").attr("src", globalPath + "/Images/CaptionTab.jpg"); captionState = 0; }); } } function setCaptionHideTimer() { captionHideTimer = window.setTimeout(hideCaption,captionHideTime); } function clearCaptionHideTimer() { if(captionHideTimer) { window.clearTimeout(captionHideTimer); captionHideTimer = null; } } function showThumbs() { if (holderState == 0) { $("#ThumbTab").attr("src", globalPath + "/Images/ThumbTabHot.jpg"); holder.effect("slide", { "direction": "down" }, 500, function() { holderState = 1; }); } } function hideThumbs() { if (holderState == 1) { if (jQuery.browser.safari) { holder.css("display", "none"); $("#ThumbTab").attr("src", globalPath + "/Images/ThumbTab.jpg"); holderState = 0; } else { holder.toggle("slide", { "direction": "down" }, 500, function() { $("#ThumbTab").attr("src", globalPath + "/Images/ThumbTab.jpg"); holderState = 0; }); } } } function setThumbsHideTimer() { thumbsHideTimer = window.setTimeout(hideThumbs,thumbsHideTime); } function clearThumbsHideTimer() { if(thumbsHideTimer) { window.clearTimeout(thumbsHideTimer); thumbsHideTimer = null; } } function setImage(image) { //Show Loading Image loadingImage.css("display", "inline"); var img = new Image(); img.onload = function() { //imgMain.css("background","url(" + img.src + ")").css("display","none").fadeIn(250); imgMain.attr("src", img.src).css("display", "none").fadeIn(250); setCaption(image.attr("alt")); //Hide Loading Image loadingImage.css("display", "none"); }; img.src = image.attr("bigimg"); } function setCaption(caption) { $("#CaptionText").html(caption); //alert($("#CaptionText").html()); /* if (caption.length 0) { $("#CaptionText") .css("display", "inline") .css("left", imgMain.position().left + "px") .css("top", imgMain.position().top + "px") .css("width", imgMain.width() + "px") .html(caption); $("#CaptionOverlay").css("display", "inline") .css("height", $("#CaptionText").height() + 36 + "px") .css("left", imgMain.position().left + "px") .css("top", imgMain.position().top + "px") .css("width", imgMain.width() + "px"); } else { $("#CaptionText").css("display", "none"); $("#CaptionOverlay").css("display", "none"); } */ } Please if anyone could help, it would be greatly appreciated! Thanks in advance. Justin

    Read the article

  • Jquery cycle plugin image resizing issue opera

    - by Sam Gregory
    I am using the cycle plugin within Joomla and it works fine on IE6,FF,SAFARI,CHROME however when you view it in OPERA breaking happens. It loads fine but when it brings in the next slide and every consequent slide after that it re-sizes them to what i can only assume to be the browswe window's width and height. here's my javascript <script type="text/javascript"> $('.fullScreen').cycle({ speed: 1000, timeout: 100 }); </script> css <script type="text/css"> .fullScreen { margin-left: 0px; height: 355px; clear: both; width: 475px; z-index: -1; overflow: hidden; } </script> and finally HTML <div class="fullscreen"> <img width="475px" src="images/someimage1.jpg" /> <img width="475px" src="images/someimage2.jpg" /> <img width="475px" src="images/someimage3.jpg" /> </div> hope I'm not the only one having this problem.

    Read the article

  • Using a UITextView in a UITableViewCell with a UIKeyboard

    - by Luther Baker
    I have a simple UITableView that has two cells. Cell 0:0 consists of a UITextField we'll call the title and Cell 0:1 consists of a UITextView we'll simply call a note. Cell 0:0 (the text field) is a standard size, one row cell. I'm therefore trying to fill the rest of the screen up with Cell 0:1 so I return a larger height for it. This all displays just fine and I'm using most of the iPhone real estate pretty efficiently at this point. Now, when a user wants to edit one of these cells, he need only click in the appropriate textfield or textview. If a user clicks in the textfield of Cell 0:0, all is well and the keyboard slides up from the bottom. My problem occurs when a user clicks into the the textview (Cell 0:1). No matter what I try, the UITableView wants to slide the entire table view up and that generally put the UITextView in Cell 0:1 halfway out of sight. What I want to do is two fold, I'm registered for when the keyboard will appear and in that method, I'd like to shrink the UITextView in Cell 0:1 as well as shrink the UITableViewCell itself so that the keyboard doesn't have to be smart and think it has to slide the UITableViewCell into view. Unfortunately, no matter what I try, the UITableView slides up. I just want the UITableView to stand still and I want the cell to animate up/shorter with the keyboard. It appears that, by the time the keyboard is actually animating into the screen - it is to late to adjust the cell size. The UIKit has already made up it's mind that it is going to scroll the UITableView.

    Read the article

  • jquery ui slider IE7 bug...

    - by Reigel
    When you are holding the handles to slide them the width of the range blows out to 100% width, but snaps back to the width it's supposed to be once you release the handle. jQuery 1.4.2 UI 1.8.2 please help jQuery if ($("#topImageSlider").length){ var max = 120; var initialValue = 40; function refreshValue(){ //$('#sliderValue .current').text($("#topImageSlider").slider("value")); $('#sliderValue .current').text($('.ui-slider-range').width()); } $("#topImageSlider").slider({ orientation: 'horizontal', range: "min", max: max, min: 1, value: initialValue, slide: refreshValue, change: refreshValue }).after('<div id="sliderValue"><span class="current">'+ initialValue +'</span> / <span class="max">'+ max +'</span></div>'); } css #topImageSlider, #sliderValue { margin: 0 auto; width: 572px; text-align: center; } #topImageSlider { margin-top: 20px; background: url(../img/bg/slider.png) no-repeat; height: 5px; } #topImageSlider .ui-slider-range { background: url(../img/bg/slider-progress.gif) repeat-x; left: 2px; height: 5px; } #topImageSlider .ui-slider-handle { background: url(../img/btn/slider-handle.png) no-repeat; width: 24px; height: 24px; top: -8px; outline: 0; cursor: pointer; z-index: 999; } #sliderValue { margin-top: 10px; color: #bbb; font-weight: bold; } #sliderValue .current { color: #ff6e0d; }

    Read the article

  • Android -- How to position View off-screen?

    - by borg17of20
    Hello all, I'm trying to animate a simple ImageView in my application and I want it to slide in from the bottom of the screen and come to a resting position where the top 50px of the view is off the top of the screen (e.g. the final position of the ImageView should be -50px in X). I've tried to use the AbsoluteLayout to do this, but this actually cuts off the top 50px of the ImageView such that the top 50px is never rendered. I need to have the top 50px of the ImageView visible/rendered while it's animating and then simply have it come to a rest slightly off-screen. I hope I've explained that well enough. Here is what I'm currently using as a layout and the slide-in animation (this currently doesn't render the top 50px of the ImageView): Layout: <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/QuickPlayClipLayout"> <ImageView android:id="@+id/Clip" android:background="@drawable/clip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_y="-50dp"> </ImageView> </AbsoluteLayout> Animation: <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="1000"/> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="1000" /> </set> Thanks in advance.

    Read the article

  • C# i am trying to make a zoom effect

    - by thrillercd
    Pls help! i am trying to make a zoom effect on a picturebox by mouse wheel.Everything is ok except that when i use mouse middle button to zoom in or zoom out it is ok but it does not zoom in or zoom out the point which the mouse cursor on.when i zoom in the point what i want it always slide .Pls help me to add a snippet code to make it right working. Here is my code. I am trying to make a zoom effect on a picturebox by mouse wheel. Everything is ok except that when I use mouse middle button to zoom in or zoom out it is ok but it does not zoom in or zoom out the point which the mouse cursor on. When I zoom in the point what I want it always slide. Please help me to add a snippet code to make it right working. Here is my code: int i = 5; int index = 10; private double[] zoomfactor = { .25, .33, .50, .66, .80, 1, 1.25, 1.5, 2.0, 2.5, 3.0 }; private void Zoom(int i) { double new_Zoom = zoomfactor[i]; imgBox.Width = Convert.ToInt32(imgBox.Image.Width * new_Zoom); imgBox.Height = Convert.ToInt32(imgBox.Image.Height * new_Zoom); } private void On_wheel(object sender, System.Windows.Forms.MouseEventArgs e) { i = i + e.Delta / 120; if (i < 0) { i = 0; } else { if (i <= index) i = i; else i = index; } Zoom(i); }

    Read the article

  • Wordpress and Anythingslider Navigation Thumbnails

    - by Tom
    So I am using AnythingSlider in Wordpress. This is why I am trying to call the thumbnails from the original posts. Anything slider will configure thumbnail navigation like this: function formatText(index, panel) { return index + ""; } $(function () { $('.anythingSlider').anythingSlider({ navigationFormatter: formatText // Details at the top of the file on this use (advanced use) }); }); As you can see, the navigationFormatter will allow me to format the nav (including thumbnails) however I want. For example, to format thumbnails, I could do this: navigationFormatter : function(i, panel){ // add thumbnails as navigation links return '<img src="images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i - 1] + '.jpg">'; } So my issue is getting the wordpress slide images to show up there dynamically, rather than in a folder (as the above example shows). For reference, this is my php query that is pulling the posts image (from a script I've already written: <img class="slider-img" style="float:left;" src="<?php if(function_exists('wp_get_post_image')){ echo wp_get_post_image(array( 'return_html' => false, 'width' => 500 )); } ?>" /> I hope this update helps. Thank you guys so much. The Stack overflow community is great!

    Read the article

  • touchesBegin & touchesMove Xcode Obj C Question

    - by AndrewDK
    So I have my app working good when you press and drag along. I also have UIButtons set to Touch Down in Interface Builder. As well when you drag you need to drag from the outside of the UIButton. You cannot click on the UIButton and drag to the other. TOUCHES MOVED: Code: -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [[event touchesForView:self.view] anyObject]; CGPoint location = [touch locationInView:touch.view]; if(CGRectContainsPoint(oneButton.frame, location)) { if (!oneButton.isHighlighted){ [self oneFunction]; [oneButton setHighlighted:YES]; } }else { [oneButton setHighlighted:NO]; } // if(CGRectContainsPoint(twoButton.frame, location)) { if (!twoButton.isHighlighted){ [self twoFunction]; [twoButton setHighlighted:YES]; } }else { [twoButton setHighlighted:NO]; } } TOUCHES BEGAN: Code: - (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [[event touchesForView:self.view] anyObject]; CGPoint location = [touch locationInView:touch.view]; if(CGRectContainsPoint(oneButton.frame, location)) { [self oneFunction]; [oneButton setHighlighted:YES]; } if(CGRectContainsPoint(twoButton.frame, location)) { [self twoFunction]; [twoButton setHighlighted:YES]; } } I want to be able to click on any of the button fire the function & also be able to drag from one button on to the other and fire that function. So basically just being able to click on a button and slide your finger over and activate the other button without having to press and slide from outside of the button. I think I'm close, need a bit of help. Hope thats clear enough. Thanks.

    Read the article

  • How to perform kCATransitionPush animation without any transparency / fade effects

    - by Anthony
    I'm trying to duplicate the "slide up from the bottom" animation that [UIViewController presentModalViewController:animated:] performs but without calling it because I don't want a modal view. The below core animation code comes very close but appears to be changing transparency values of the views during it. At the start of the animation you can partially see through the view sliding up. By the middle/end of the animation the view we are sliding over is fully transparent so we can see behind it. I'd like both to remain fully opaque during this animation. Any ideas on how to stop transparency changes in this code or to otherwise get the "slide up animation" I am looking for without requiring a modal view? UIViewController *nextViewController = [[UIViewController alloc] autorelease]; nextViewController.view.backgroundColor = [UIColor redColor]; CATransition *animation = [CATransition animation]; animation.duration = 3.5; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; animation.type = kCATransitionPush; animation.subtype = kCATransitionFromTop; [self.navigationController pushViewController:nextViewController animated:NO]; [self.navigationController.view.layer addAnimation:animation forKey:nil];

    Read the article

  • CKEditor instance in a jQuery dialog

    - by Gazillion
    Hey, I am using jQuery to open a dialog window with a textarea transformed into an instance of CKEditor. I'm using the jQuery adapter provided by the CKEditor team but when the dialog window opens up I cannot interact with the editor (it's created but "null" is written in the content space and I can't click on anything or modify the content). This bug report seems to say that by using a patch provided the issue is fixed but it doesn't seem to be working for me... Here's my code (maybe I did something wrong programmatically): HTML: <div id="ad_div" title="Analyse documentaire"> <textarea id="ad_content" name="ad_content"></textarea> </div> My includes (Everything is included correctly but maybe it's an including order issue?): <script type="text/javascript" src="includes/ckeditor/ckeditor.js"></script> <link rel="stylesheet" type="text/css" href="includes/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css" /> <script type="text/javascript" src="includes/jquery/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="includes/jquery/js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="includes/jquery/plugins/dialog-patch.js"></script> <script type="text/javascript" src="includes/ckeditor/adapters/jquery.js"></script> Javascript: $('#ad_content').ckeditor(); /* snip */ $('#ad_div').dialog( { modal: true, resizable: false, draggable: false, position: ['center','center'], width: 600, height: 500, hide: 'slide', show: 'slide', closeOnEscape: true, autoOpen: false }); $('.analyse_cell').click(function(){ $('#ad_div').dialog('open'); });

    Read the article

  • Firefox drags div like it was an image, javascript event handlers possibly to blame

    - by user281434
    Hi, I'm using this HTML,CSS and Javascript code (in one document together if you want to test it out): <style type="text/css"> #slider_container { width: 200px; height: 30px; background-color: red; display:block; } #slider { width: 20px; height: 30px; background-color: blue; display:block; position:absolute; left:0; } </style> <script type="text/javascript" src="../../js/libs/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#slider").mousedown(function() { $(document).mousemove(function(evnt) { $("#test").html("sliding"); }).mouseup(function() { $("#test").html("not sliding"); $(document).unbind("mousemove mouseup"); });}); }); </script> <div id="test">a</div> <div id="slider_container"> <div id="slider"></div> </div> Everything (surprisingly) works fine in IE, but firefox seems to totally clusterf*ck when this javascript is used. The first "slide" is okay, you drag, it says "sliding", you drop, it says "not sliding". On the second "slide" (or mousedown if you will), firefox suddenly thinks the div is an image or link and wants to drag it around. Screenshot of the dragging: http://i.imgur.com/nPJxZ.jpg Obviously the blue div half-positioned in the red div is the one being dragged. Windows does not capture the cursor when you take a screenshot, but it's a stop sign. Is there someway to prevent this default behaviour?

    Read the article

  • CAShapeLayer slowing down interface rotation

    - by MrMage
    Hi, I am trying to move some custom drawing code from a view into a CAShapeLayer, which then get added as a sublayer to the original view's CALayer. This also works well, but when rotating the device, the animation starts to stutter, e.g. you just see the frame in the original orientation and then the final orientation, with at most one frame in between - not smooth at all. Slide-in and slide-out animations of the corresponding UIViewController are a bit jerky, too (but not that much). All the CAShapeLayer has in its path is one CGPathAddRect, it is set to be opaque, its opacity is 1.0f and the fillColor is set to opaque blue. When drawing the path directly in the views drawRect method, however, the animation is smooth. So I suppose it has something to do with the CAShapeLayer being animated during the rotation. Could you tell me how to either get rid of those jerkiness or just hide the CAShapeLayer when animating? Getting back to just draw CGPaths directly is not an option to me because I rely on the ability of CAShapeLayer to animate its path (it is not animated in my tries with rotating the view). /update: this also happens when the rotating UIViewControllers view contains a view with a subclass of CAGradientLayer as its layerClass (e.g. a view with a gradient layer as background). Cheers MrMage

    Read the article

  • jQuery accordion - different image for active sections

    - by Andrew Cassidy
    Hi, I'm using Ryan Stemkoski's "Stupid Simple Jquery Accordion Menu" which is available here: stemkoski.com/stupid-simple-jquery-accordion-menu/ Here is the javascript $(document).ready(function() { //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) $('.accordionButton').click(function() { //REMOVE THE ON CLASS FROM ALL BUTTONS $('.accordionButton').removeClass('on'); //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES $('.accordionContent').slideUp('normal'); //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT if($(this).next().is(':hidden') == true) { //ADD THE ON CLASS TO THE BUTTON $(this).addClass('on'); //OPEN THE SLIDE $(this).next().slideDown('normal'); } }); /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER $('.accordionButton').mouseover(function() { $(this).addClass('over'); //ON MOUSEOUT REMOVE THE OVER CLASS }).mouseout(function() { $(this).removeClass('over'); }); /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ /******************************************************************************************************************** CLOSES ALL S ON PAGE LOAD ********************************************************************************************************************/ $('.accordionContent').hide(); }); and the CSS #wrapper { width: 800px; margin-left: auto; margin-right: auto; } .accordionButton { width: 800px; float: left; _float: none; /* Float works in all browsers but IE6 */ background: #003366; border-bottom: 1px solid #FFFFFF; cursor: pointer; } .accordionContent { width: 800px; float: left; _float: none; /* Float works in all browsers but IE6 */ background: #95B1CE; } /*********************************************************************************************************************** EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS ************************************************************************************************************************/ .on { background: #990000; } .over { background: #CCCCCC; } There is an "on" class which allows the style of the accordionButton class when it is active but I would like to be able to have each active accordionButton class have a different image. http://www.thepool.ie For example, in the above site the word "WORK" should be a darker grey image when the work section is selected, so should COLLAB when it is selected etc. I can't figure out how to do this, any help would be greatly appreciated. Thanks, Andrew

    Read the article

  • setInterval works only the first time

    - by Neil
    Hi, I am trying to use setTimer to animate a slide show using straightforward jQuery. I provide the user with a button (in the form of a "DIV" with a button background image) that he clicks to start the show and which then turns into a pause button. The slides are supposed to change every 3 seconds. Here is the relevant code: playLink = $('<div id="lbPlayLink" />').click(function(){ $(playLink).hide(); $(pauseLink).show(); slideInterval = setInterval(function(){next()}, 3000) })[0]; pauseLink = $('<div id="lbPauseLink" />').click(function(){ $(playLink).show(); $(pauseLink).hide(); clearInterval(slideInterval); }).hide()[0]; The next() function call does the work of replacing the slide with the next one. I have checked out this function and it works perfectly if I call it directly (synchronously), however, when it gets called asonchronously by the "setInterval", it works fine the first time (3 seconds after I click on the button), but is never called again, even though it should be called 3 seconds later. I know it's never called as I put an "alert" call at the beginning and end of the function. If I replace the "next()" call in the "setInterval" by "alert('test')" then I can see the setInterval is doing what it is supposed to. I can't for the life of me see why "alert()" is OK but "next()" isn't, unless it has something to do with "scope" of functions, but in that case why does it work the first time? I've tried debugging the code with firebug, but it can't really help with timeout functions like this. Neither Firefox nor IE8 show any error messages. I've looked through the various posts here and elsewhere on setInterval, but can't see anything relevant that I haven't tried already. I've been experimenting now for about 3 hours and it's doing my head in. Can anyone suggest what I can try next? Thanks in advance Neil

    Read the article

  • jQuery Collapse (with cookies), default open instead of closed?

    - by Christian
    Hi. I've got a jQuery snippet which basically allows a user to toggle a div, open or closed - their preference is saved in a cookie. (function($) { $.fn.extend({ collapse: function(options) { var defaults = { inactive : "inactive", active : "active", head : ".trigger", group : ".wrap-me-up", speed : 300, cookie : "collapse" }; // Set a cookie counter so we dont get name collisions var op = $.extend(defaults, options); cookie_counter = 0; return this.each(function() { // Increment cookie name counter cookie_counter++; var obj = $(this), sections = obj.find(op.head).addClass(op.inactive), panel = obj.find(op.group).hide(), l = sections.length, cookie = op.cookie + "_" + cookie_counter; // Look for existing cookies for (c=0;c<=l;c++) { var cvalue = $.cookie(cookie + c); if ( cvalue == 'open' + c ) { panel.eq(c).show(); panel.eq(c).prev().removeClass(op.inactive).addClass(op.active); }; }; sections.click(function(e) { e.preventDefault(); var num = sections.index(this); var cookieName = cookie + num; var ul = $(this).next(op.group); // If item is open, slide up if($(this).hasClass(op.active)) { ul.slideUp(op.speed); $(this).removeClass(op.active).addClass(op.inactive); $.cookie(cookieName, null, { path: '/', expires: 10 }); return } // Else slide down ul.slideDown(op.speed); $(this).addClass(op.active).removeClass(op.inactive); var cookieValue = 'open' + num; $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); }); }); } }); })(jQuery); Demo: http://christianbullock.com/demo/ I'm just wondering how I can display the list open as default, and have the div collapse when the header is clicked? Many thanks. Christian.

    Read the article

  • jQuery | Click child, hides parent

    - by Jamie
    Hey, I have a list of using ul and li: <span class="important">Show/Hide</span> <div id="important" class="hidden"> <ul class="sub"> <li> Value one </li> <li class="child"> <img src="../img/close.png" /> </li> </ul> </div> $(".important").click(function () { $("#important").slideToggle("fast"); }); When the child (class="child") is clicked on, it should slide up the div (id="important"), however, there are other lists that have different IDs, I want the div to slide up when the child is clicked I did this: $(".child").click(function () { $(".child < div").slideUp("fast"); }); I have no idea how to make it work, I've done other combinations, can't seem to do it.

    Read the article

  • PDF to PNG Processor - Paperclip

    - by Josh Crowder
    I am trying to develop a system in which a user can upload a slideshow (pdf) and it'll export each slide as a png. After some digging around I came across a post on here that suggested using a processor. I've had a go, but I cant get the command to run, if it is running then I don't know what is happening because no errors are being shown. Any help would be appreciated! module Paperclip class Slides < Processor def initialize(file, options = {}, attachment = nill) super @file = file @instance = options[:instance] @current_format = File.extname(@file.path) @basename = File.basename(@file.path, @current_format) end def make dst = Tempfile.new( [ @basename, @format].compact.join(".")) dst.binmode command = <<-end_command -size 640x300 #{ File.expand_path(dst.path) } tester.png end_command begin success = Paperclip.run("convert", command.gsub(/\s+/, " "))) rescue PaperclipCommandLineError raise PaperclipError, "There was an error processing the thumbnail for #{@basename}" end end end end I think my problem is with the convert command... When I run that command by hand, it works but it doesn't give the details of each slide it just executes it. What I need to happen is once its made all the slides, pass back the data to a new model... or I know where all the slides are, but once I get to that point I'm not sure what todo.

    Read the article

  • Scriptaculous problem in IE

    - by Django Reinhardt
    Hi there. We've got this very annoying problem with Scriptaculous and Internet Explorer 7/8. We have two Effect.toggles on the same page, but only one of them is ever working (the first one). I hope it's some simple mistake in my implementation, but I can't seem to find any decent documentation. Hopefully somebody here can help. The HTML/JS looks like this: <ul> <li id="LinkA" class="icon"> <a onclick="new Effect.toggle('divA', 'slide', { duration: 0.6 }); return false;" href="#">Show List A</a> </li> </ul> <div id="divA" style="display:none"> <div> -- Things to display -- </div> </div> <ul> <li id="LinkB" class="icon"> <a onclick="new Effect.toggle('divB', 'slide', { duration: 0.6 }); return false;" href="#">Show List B</a> </li> </ul> <div id="divB" style="display:none"> <div> -- Things to display -- </div> </div> It works perfectly in Chrome and Firefox, but the second one never works in IE 7 or 8, no matter what I do. Any help would be greatly appreciated!

    Read the article

  • div stacking/layout with css or javascript

    - by liz
    so i have 4 divs (i actually have many more but this will simplify the question). i want to display them in two columns. the 4 divs vary in height. the number of actual divs in the end will vary. so if i have this <div id="1" style="height: 200px" class="inline">some content here</div> <div id="2" style="height: 600px" class="inline">some content here</div> <div id="3" style="height: 300px" class="inline">some content here</div> <div id="4" style="height: 200px" class="inline">some content here</div> with styling thus .inline { display: inline-block; vertical-align: top; width: 48%;} so #1 would go left and then #2 would shove up beside it to the right, great, but the #3 will not slide up the 400px to fit nicely below #1. (of course)... it goes on the left side but at 600px from the top clearing the bottom of #2. etc... how would i get the divs to slide up into the empty spaces, is it possible with css? jquery maybe? i know i could write column divs to mark it up, but since the number of divs constantly change and the heights vary according to content. It would be nice to just get rid of the space since we dont really care about the order. any thoughts?

    Read the article

  • jQuery toggling div visibility

    - by Eef
    I have a HTML document with the below setup: <div class="main-div" style="padding: 5px; border: 1px solid green;"> <div class="first-div" style="width: 200px; height: 200px; padding: 5px; border: 1px solid purple"> First Div <a href="#" class="control">Control</a> </div> <div class="second-div hidden" style="width: 200px; height: 200px; padding: 5px; border: 1px solid red;"> Second Div <a href="#" class="control">Control</a> </div> </div> I also have a CSS class setup called hidden with display setup to none. I have jQuery setup like so: $('.control').click(function(){ var master = $(this).parent().parent(); var first_div = $(master).find(".first-div"); var second_div = $(master).find(".second-div"); $(first_div).toggleClass("hidden") $(second_div).toggleClass("hidden") }); This setup toggles the visibility of the divs, click the control button it hides one div and show the other. However this just hides and shows each div in a flash. I am looking to add some animation to the transitioning of the divs, maybe have one slide up and the other slide down when the 'control' is clicked and vice versa but I am unable to achieve this. Could anyone help out and give some advice on how to do this? Cheer Eef

    Read the article

  • Simple jQuery toggle() and return false inside click()

    - by Casey Stark
    I'm mostly a djangonaut and phper, but I'm getting javascript development. I've been looking at this very simple block for a feedback widget on a page. The code is pretty self-explanatory. <a id="feedback-widget-toggle" href="[feedback_url]">Feedback</a> <div id="feedback-widget"> <form method="POST" action="[form_url]"> ... </form> </div> <script type="text/javascript"> $(document).ready(function() { $("#feedback-widget-toggle").click(function() { $("#feedback-widget").toggle("slide", {}, 500); return false; }); }); </script> It's really simple. So simple that I feel pretty dumb for this one. The jQuery is just supposed to disable the link and slide out the feedback-widget div. That's it. I'm new to jQuery, so it's probably some very simple syntax error that I'm not sure how to debug well enough. Thanks.

    Read the article

  • Extract the vb code associated with a macro attached to an Action button in PowerPoint

    - by Patricker
    I have about 25 PowerPoint presentations, each with at least 45 slides. On each slide is a question with four possible answers and a help button which provides a hint relevant to the question. Each of the answers and the help button is a PowerPoint Action button that launches a macro. I am attempting to migrate all the questions/answers/hints into a SQL Database. I've worked with Office.Interop before when working with Excel and Word and I have plenty of SQL DB experience, so I don't foresee any issues with actually extracting the text portion of the question and answer and putting it into the db. What I have no idea how to do is given an object on a slide - get the action button info - Get the macro name - and finally get the macro's vb code. From there I can figure out how to parse out which is the correct answer and what the text of the hint is. Any help/ideas would be greatly appreciated. The guy I'm doing this for said he is willing to do it by hand... but that would take a while.

    Read the article

  • Change Powerpoint chart data with .NET

    - by mc6688
    I have a Powerpoint template that contains 1 slide and on that slide is a chart. I'd like to be able to manipulate that charts data using .NET. So far I have code that... unzips the Powerpoint file. unzips the embedded excel file (ppt\embeddings\Microsoft_Office_Excel_Worksheet1.xlsx) It successfully manipulates the data in the excel sheet and zips it back up. Opens and manipulates ppt\charts\chart1.xml Powerpoint is then zipped up and delivered to the user The result of this is a Powerpoint file that shows a blank chart. But when I click on the chart and go to edit data it updates the data and shows the correct chart. I believe my problem is with the chart1.xml that I am generating. I have compared my generated version with a version created by Powerpoint and they are almost identical. The only differences are in the values for <c:crossAx> and <c:axId>. There are also some rounding difference in the data. But I do not feel like that would result in an blank chart. Is there another file that I need to edit? Does anyone have any ideas as to what else I should try to get this working?

    Read the article

< Previous Page | 14 15 16 17 18 19 20 21 22 23 24 25  | Next Page >