Search Results

Search found 451 results on 19 pages for 'mouseover'.

Page 7/19 | < Previous Page | 3 4 5 6 7 8 9 10 11 12 13 14  | Next Page >

  • Another passing variable through function jQuery/JS problem...

    - by dallen
    Here's my code: function mouseOver(variable) { return function() { $(variable).fadeIn(100); }; } function mouseOut(variable) { return function() { $(variable).fadeOut(100); }; } function lawyer(var1, var2, var3, var4) { return function() { $(var1).bind('mouseenter', mouseOver(var2)).bind('mouseleave', mouseOut(var2)).click( function() { $(var1).unbind('mouseenter').unbind('mouseleave'); $(var1).removeClass('off').addClass('on'); $(var3).bind('mouseenter', mouseOver(var4)).bind('mouseleave', mouseOut(var4)); $(var3).removeClass('on').addClass('off'); $(var4).hide(); }); } } lawyer("#group", ".b", "#group2", ".l"); What would be the reason for this not working? It works in that it hides $(var4).hide();, but clicking on the object doesn't seem to do anything. It works if I take the code out of a function and just copy/paste it a few times and change the targets. I'm not seeing it... Any help would be appreciated!

    Read the article

  • jQuery $(document).ready and UpdatePanels?

    - by Herb Caudill
    I'm using jQuery to wire up some mouseover effects on elements that are inside an UpdatePanel. The events are bound in $(document).ready . For example: $(function() { $('div._Foo').bind("mouseover", function(e) { // Do something exciting }); }); Of course, this works fine the first time the page is loaded, but when the UpdatePanel does a partial page update, it's not run and the mouseover effects don't work any more inside the UpdatePanel. What's the recommended approach for wiring stuff up in jQuery not only on the first page load, but every time an UpdatePanel fires a partial page update? Should I be using the ASP.NET ajax lifecycle instead of $(document).ready?

    Read the article

  • jQuery Tooltip plugin error

    - by hd
    i have written this code to apply 'jQuery Tooltip plugin' to ajax loaded elements. i mean the row i want to show tooltip on its mouseover is loaded into page by ajax. here's the code: $("[id^=pane]").delegate("[id^=comm]","mouseover",function() { $(this).tooltip({ // each trashcan image works as a trigger tip: "#tooltip", // custom positioning position: "center right", // move tooltip a little bit to the right offset: [0, 15], // there is no delay when the mouse is moved away from the trigger delay: 0 }).dynamic({ bottom: { direction: "down", bounce: true } }); }); the tooltip is shown when mouseover but firebug report this error: "$(this).tooltip({tip: "#tooltip", position: "center right", offset: [0, 15], delay: 0}).dynamic is not a function" is it because of using $(this) ???

    Read the article

  • Unbind Events with JQuery: Does it work with events setup in HTML?

    - by Abs
    Hello all, I have a few onclick and on mouseover events in my html generated by PHP, something like this: <div onmouseover="fave('heart_<?php echo $row['id']; ?>';" class="heart"><a href=""></a></div> I wish to make use of unbind on the mouseover but it hasn't worked when I tried this: $('#'+ id).unbind('mouseover'); So I am guessing unbind will only work with events created by JQuery? Is there something else I can try? Btw, I can't move my events to a separate js file as each id is unique and. Thanks all

    Read the article

  • Actionscript3 button tip

    - by Mango
    Please, someone could help me? I need to send the parameter ad_mc by the command: ad_btn.addEventListener (MouseEvent.MOUSE_MOVE, MouseOver); to use the same function for all buttons function MouseOver(evt:MouseEvent):void{ ad_mc.gotoAndPlay("on"); } function MouseOut(evt:MouseEvent):void{ ad_mc.gotoAndPlay("off"); } ad_btn.addEventListener(MouseEvent.MOUSE_OUT, MouseOut); ad_btn.addEventListener(MouseEvent.MOUSE_OVER, MouseOver); If I wanted to send the parameter ad_btn I would use: MovieClip (evt.target). GotoAndPlay ("on"); but is not the case

    Read the article

  • How to only show simpleTip if certain conditions are true?

    - by Michael
    I'm working on my first jquery project and have a question regarding the simpletip plugin. I basically have a calendar where the user can click different meeting titles and the corresponding dates get shaded in with a certain color. I am then using the simpletip to display more detailed information about the meeting when the user hovers over that date. What I want is for the simpletip to only display if the cell is colored in, or "on". When the calendar is blank and no meetings are activated, I don't want all the simpletips to show. I have tried using an if statement with a .mouseover() - this works at first, when the cells are off, no simpletip. After the meeting is turned on and colored in, the first mouseover does nothing, then the second mouseover shows the simpletip, and then the simpletip remains active even after the cell is turned off. Hope this makes sense... please help! Thank you in advance

    Read the article

  • Jquery calendar and tab sliding div clash...

    - by StealthRT
    Hey all, i am trying my best to figure out another way around this problem i seem to have encountered. On my website i have a jquery calendar and also a jquery div tab slider (this: http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html). The problem comes into play with the DIV tag. The calender loads up inside a DIV with a id of 'calender'. The CSS for the tabs have the DIV hidden: CSS: .boxBody div {display:none;} .boxBody div.show {display:block;} .boxBody #category a {display:block;} And because of that, the calender never shows on the page. However, if i comment out that css code above, it shows up but does not cover each section as it should. In other words, everything is shown when it should be hidden until the tabs are clicked on to revel it. code: <script type="text/javascript"> $(document).ready(function() { $('#tabMenu > li').click(function(){ $('#tabMenu > li').removeClass('selected'); $(this).addClass('selected'); $('.boxBody div').slideUp('1500'); $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500'); }).mouseover(function() { $(this).addClass('mouseover'); $(this).removeClass('mouseout'); }).mouseout(function() { $(this).addClass('mouseout'); $(this).removeClass('mouseover'); }); $('.boxBody #category li').mouseover(function() { $(this).css('backgroundColor','#888'); $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300}); }).mouseout(function() { $(this).css('backgroundColor',''); $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300}); }); $('.boxBody li').click(function(){ window.location = $(this).find("a").attr("href"); }).mouseover(function() { $(this).css('backgroundColor','#888'); }).mouseout(function() { $(this).css('backgroundColor',''); }); }); </script> <div align="center"> <div class="Mainbox"> <ul id="tabMenu"> <div id="theLogo"><[img] src="img/theLogo.png" width="415" height="146" /></div> <li class="stats"><[img] src="img/Stats.png" width="70" height="52" id="tab1" /></li> <li class="cal"><[img] src="img/cal.png" width="70" height="52" id="tab2" /></li> <li class="loyalty"><[img] src="img/Loyalty.png" width="70" height="52" id="tab3" /></li> <li class="Employees"><[img] src="img/Employees.png" width="70" height="52" id="tab4" /></li> <li class="txtemail"><[img] src="img/TxtEmail.png" width="70" height="52" id="tab5" /></li> </ul> <div class="boxTop"></div> <div class="boxBody"> <div id="stats" class="show"> Just a test here.... </div> <div id="cal"> <div id='calendar'></div> </div> <div class="boxBottom"></div> </div> </div> How can i change the tab javascript code so that it does not have to hide the DIV's so that the calendar will work? I've tried to replace all div's with 'span' or 'p' but that does not seem to work at all. Any help would be great as i am stuck on this and can not go any further without it being solved! :) David

    Read the article

  • I'm trying to return text from a .txt file using ajax

    - by saad
    I'm trying to get my first ajax script to work. The five images are all side by side. Whenever the user hovers the mouse over any of them, it sends a request to a .txt file on the server and the caption is displayed in the div#image_caption. The problem is, even when I mouse over the image, the caption does not display. I'm not quite sure what could be causing this. Here is the code <!DOCTYPE html> <html> <head> <style type="text/css"> div#images{overflow: auto;} img{float: left; width: 200px; height: 200px; margin-right: 15px;} div#image_caption {width: 1040px; height: 300px; margin-top: 30px; border: 2px black solid;} </style> <script type="text/javascript" src ="jquery-2.0.3.js"></script> <script type="text/javascript"> $(document).ready(function() { function show_caption(url) { //shows the caption once the mouse hovers over the image var asyncreq; if(window.XMLHttpRequest) { //IE 7+ and other browsers asyncreq = new XMLHttpRequest(); //define the request } else { //for IE 7- asyncreq = new ActiveXObject("Microsoft.XMLHTTP"); } asyncreq.open("GET", url, true); //give it properties asyncreq.send(); //send the request to the server asyncreq.onreadystatechange = function() { if(asyncreq.readyState == 4 && asyncreq.status == 200) { $("div#image_caption").html(asyncreq.responseText); //add the caption (response text from the file) to the box } } } //end of show_caption(url) function hide_caption() { //hides the caption once the mouse is gone $("div#image_caption").html(""); } }); </script> </head> <body> <h1>Hover over an image for more information.</h1> <div id = "images"> <img src="images/backg.jpg" mouseover = 'show_caption("backg_caption.txt");' mouseout = 'hide_caption();'/> <img src="images/Desert.jpg"mouseover = 'show_caption("Desert_caption.txt");' mouseout = 'hide_caption();'/> <img src="images/Penguins.jpg" mouseover = 'show_caption("Penguins_caption.txt");' mouseout = 'hide_caption();'/> <img src="images/Tulips.jpg" mouseover = 'show_caption("Tulips_caption.txt");' mouseout = 'hide_caption();'/> <img src="images/odji1.jpg" mouseover = 'show_caption("Desert_caption.txt");' mouseout = 'hide_caption();'/> </div> <div id = "image_caption"> </div> </body> </html>

    Read the article

  • So many ways to bind an event

    - by XGreen
    There are various ways to bind events to elements in jquery .click , .bind, .live, .delegate, saving events data in .data etc which is the most superior method among these and why? wouldn't a single pattern like this be more beneficial? $('selector').bind({ event: 'click mouseover ...', keepAlive: (true, false, ...), trigfunction: (function() { // I run for click }, function() { // i run for mouseover }, function() { ///... }) });

    Read the article

  • jquery ui dialog button

    - by mike
    Hello, With a jQuery UI dialog, I need to be able to set tooltips on buttons... I have the following code: buttons: { 'My Button' : function(e) { $(e.target).mouseover(function() { alert('test'); }); } This allows me to do something on "mouseover" but only once the button has been clicked. What do I need to do in order to make this function before the button has been clicked? Thanks

    Read the article

  • Automaticly Change VisualState in Silverlight

    - by Matt
    If you create a simple button and then choose Edit Template - Edit a Copy, Blend will automatically generate a style area, along with all the button states (MouseEnter, MouseLeave, Pressed, etc). No where in the generated code does it say that on a "MouseOver" event, change the state to "MouseOver", but it still manages to work! How does a standard button do it? Is there some sort of AutoEventWireUp going on?

    Read the article

  • jQuery find events handlers registered with an object

    - by ages04
    I need to find which event handlers an object has registered. eg. $("#el").click(function(){...}); $("#el").mouseover(function(){...}); Is there anyway I can use a function to find out that- $("#el") has click and mouseover registered and possibly iterate over the event handlers. If not a jQuery Object can we find this on a plain DOM object?

    Read the article

  • How to get the Grid.Row Grid.Column from the selected added control?

    - by younevertell
    How to get the Grid.Row Grid.Column from the added control? Basically I have 16 grids with 4 rows and 4 columns, each grid is added a round button. how to determine which rows and columns the selected round buttons are located respectively in the below MouseEventHandler of mouseover? For mouseclick, there is only round button selected, but for mouseover, there would be a collection of buttons. RoundButton_MouseEnter, RoundButton_MouseLeave, RoundButton_MouseDown, RoundButton_MouseUp Thanks

    Read the article

  • VB6: assign javascript function to a dom element

    - by Fuxi
    hi, i'm using the mshtml library for parsing out html via MSHTML.HTMLDocument. my question: is there a way to assign a javascript function to a dom element? i've tried something like: div.onmouseover = "function(){alert('mouseover')}" and div.setattribute "onmouseover" , "function(){alert('mouseover')}" without success (no error but no effect either). anyone knows if its possible? thx

    Read the article

  • Highlight Row in GridView with Colored Columns

    - by Vincent Maverick Durano
    I wrote a blog post a while back before here that demonstrate how to highlight a GridView row on mouseover and as you can see its very easy to highlight rows in GridView. One of my colleague uses the same technique for implemeting gridview row highlighting but the problem is that if a Column has background color on it that cell will not be highlighted anymore. To make it more clear then let's build up a sample application. ASPX:   1: <asp:GridView runat="server" id="GridView1" onrowcreated="GridView1_RowCreated" 2: onrowdatabound="GridView1_RowDataBound"> 3: </asp:GridView>   CODE BEHIND:   1: private DataTable FillData() { 2:   3: DataTable dt = new DataTable(); 4: DataRow dr = null; 5:   6: //Create DataTable columns 7: dt.Columns.Add(new DataColumn("RowNumber", typeof(string))); 8: dt.Columns.Add(new DataColumn("Col1", typeof(string))); 9: dt.Columns.Add(new DataColumn("Col2", typeof(string))); 10: dt.Columns.Add(new DataColumn("Col3", typeof(string))); 11:   12: //Create Row for each columns 13: dr = dt.NewRow(); 14: dr["RowNumber"] = 1; 15: dr["Col1"] = "A"; 16: dr["Col2"] = "B"; 17: dr["Col3"] = "C"; 18: dt.Rows.Add(dr); 19:   20: dr = dt.NewRow(); 21: dr["RowNumber"] = 2; 22: dr["Col1"] = "AA"; 23: dr["Col2"] = "BB"; 24: dr["Col3"] = "CC"; 25: dt.Rows.Add(dr); 26:   27: dr = dt.NewRow(); 28: dr["RowNumber"] = 3; 29: dr["Col1"] = "A"; 30: dr["Col2"] = "B"; 31: dr["Col3"] = "CC"; 32: dt.Rows.Add(dr); 33:   34: dr = dt.NewRow(); 35: dr["RowNumber"] = 4; 36: dr["Col1"] = "A"; 37: dr["Col2"] = "B"; 38: dr["Col3"] = "CC"; 39: dt.Rows.Add(dr); 40:   41: dr = dt.NewRow(); 42: dr["RowNumber"] = 5; 43: dr["Col1"] = "A"; 44: dr["Col2"] = "B"; 45: dr["Col3"] = "CC"; 46: dt.Rows.Add(dr); 47:   48: return dt; 49: } 50:   51: protected void Page_Load(object sender, EventArgs e) { 52: if (!IsPostBack) { 53: GridView1.DataSource = FillData(); 54: GridView1.DataBind(); 55: } 56: }   As you can see there's nothing fancy in the code above. It just contain a method that fills a DataTable with a dummy data on it. Now here's the code for row highlighting:   1: protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { 2: //Set Background Color for Columns 1 and 3 3: e.Row.Cells[1].BackColor = System.Drawing.Color.Beige; 4: e.Row.Cells[3].BackColor = System.Drawing.Color.Red; 5:   6: //Attach onmouseover and onmouseout for row highlighting 7: e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Blue'"); 8: e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=''"); 9: }   Running the code above will show something like this in the browser: On initial load: On mouseover of GridView row:   Noticed that Col1 and Col3 are not highlighted. Why? the reason is that Col1 and Col3 cells has background color set on it and we only highlight the rows (TR) and not the columns (TD) that's why on mouseover only the rows will be highlighted. To fix the issue we will create a javascript method that would remove the background color of the columns when highlighting a row and on mouseout set back the original color that is set on Col1 and Col3. Here are the codes below: JavaScript   1: <script type="text/javascript"> 2: function HighLightRow(rowIndex, colIndex,colIndex2, flag) { 3: var gv = document.getElementById("<%= GridView1.ClientID %>"); 4: var selRow = gv.rows[rowIndex]; 5: if (rowIndex > 0) { 6: if (flag == "sel") { 7: gv.rows[rowIndex].style.backgroundColor = 'Blue'; 8: gv.rows[rowIndex].style.color = "White"; 9: gv.rows[rowIndex].cells[colIndex].style.backgroundColor = ''; 10: gv.rows[rowIndex].cells[colIndex2].style.backgroundColor = ''; 11: } 12: else { 13: gv.rows[rowIndex].style.backgroundColor = ''; 14: gv.rows[rowIndex].style.color = "Black"; 15: gv.rows[rowIndex].cells[colIndex].style.backgroundColor = 'Beige'; 16: gv.rows[rowIndex].cells[colIndex2].style.backgroundColor = 'Red'; 17: } 18: } 19: } 20: </script>   The HighLightRow method is a javascript function that accepts four (4) parameters which are the rowIndex,colIndex,colIndex2 and the flag. The rowIndex is the current row index of the selected row in GridView. The colIndex is the index of Col1 and colIndex2 is the index of col3. We are passing these index because these columns has background color on it and we need to toggle its backgroundcolor when highlighting the row in GridView. Finally the flag is something that would determine if its selected or not. Now here's the code for calling the JavaScript function above.     1: protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { 2:   3: //Set Background Color for Columns 1 and 3 4: e.Row.Cells[1].BackColor = System.Drawing.Color.Beige; 5: e.Row.Cells[3].BackColor = System.Drawing.Color.Red; 6:   7: //Attach onmouseover and onmouseout for row highlighting 8: //and call the HighLightRow method with the required parameters 9: int index = e.Row.RowIndex + 1; 10: e.Row.Attributes.Add("onmouseover", "HighLightRow(" + index + "," + 1 + "," + 3 + ",'sel')"); 11: e.Row.Attributes.Add("onmouseout", "HighLightRow(" + index + "," + 1 + "," + 3 + ",'dsel')"); 12: 13: }   Running the code above will display something like this: On initial load:   On mouseover of GridView row:   That's it! I hope someone find this post useful!

    Read the article

  • Javascript menu that hovers over initial element

    - by TenJack
    I'm trying to build a javascript menu using prototype that when you mouseover an element, that element is hidden and a bigger element is shown in its place that closes onmouseout. This is what I have so far to give you an idea, but it doesn't work and is buggy. I'm not sure what the best general approach is: EDIT: using the prototype refactor from remi bourgarel: function socialMenuInit(){ var social_menu = $('sociable_menu'); social_menu.hide(); var share_words = $('share_words'); Event.observe(share_words,"mouseover",function(){ share_words.hide(); social_menu.show(); }); Event.observe(social_menu,"mouseout",function(){ social_menu.hide(); share_words.show(); }); } EDIT: The main problem now is that the second bigger menu(social_menu) that is shown on top of the smaller mouseover triggering element(share_words) only closes when you mouseout the smaller trigger element even though this element is hidden. EDIT: This is the html and css I am using: <div id="share_words">share</div> <div id="sociable_menu"></div> #share_words{ display: none; border: 1px solid white; position: absolute; right: 320px; top:0px; padding: 4px; background-image: url('/images/icons/group.png'); background-repeat: no-repeat; background-position:7px 6px; text-indent:26px; color: white; z-index: 15; } #sociable_menu{ border: 1px solid black; padding: 5px; position: absolute; right: 275px; top: -10px; z-index: 20; } Thanks for any help.

    Read the article

  • PRISM - Creating mouseoverbehavior causes a Silverlight library to not be visible in main Silverligh

    - by RHLopez
    Created a simple Silverlight 4 application (SimpleApp) then added a Silverlight 4 library (LibraryA). Added code to the library (LibraryA) to implement MouseOverBehavior by inheriting from CommandBaseBehavior along with the appropriate attached property class/methods. Added reference in SimpleApp to LibraryA and went to MainPage.xaml to add namespace reference but it does not show up with Intellisense. Typing the namespace manually and then adding the attached MouseOver command works as it should as far as intellisense showing my attached property name, i.e. ... commands:MouseOver.Command="{Binding MousedOver}". However when I try to run it I get a XAML parser error saying that the "Command" attached property does not exist in MouseOver. If I move my class definitions from LibraryA to SimpleApp then everything works. I removed everything from LibraryA and just put one class with this in it: public class MouseOverBehavior : CommandBehaviorBase<Control> { public MouseOverBehavior(Control element) : base(element) {} } With this simple class in LibraryA it will not show up in XAML intellisense in SimpleApp. XAML intellisense works with other libraries that I have written that don't use PRISM. Don't know what I am missing hopefully it's something simple. I am using the latest SL4 build for PRISM change set 42969. Visual Studio 2010 RTM Professional in Windows 7 Ultimate 64-bit.

    Read the article

  • jQuery event handling with .live() problem with setInterval and clearInterval

    - by Kyle Lafkoff
    jQuery 1.4.2: I have an image. When the mouseover event is triggered, a function is executed that runs a loop to load several images. On the contrary, the mouseout event needs to set the image back to a predetermined image and no longer have the loop executing. These are only for the images with class "thumb": $("img.thumb").live("mouseover mouseout", function(event) { var foo = $(this).attr('id'); var wait; var i=0; var image = document.getElementById(foo); if (event.type == 'mouseover') { function incrementimage() { i++; image.src = 'http://example.com/images/file_'+i+'.jpg'; if(i==30) {i=0;} } wait = setInterval(incrementimage,500); } else if (event.type == 'mouseout') { clearInterval (wait); image.src = 'http://example.com/images/default.jpg'; } return false; }); When I mouseout, the image is set to the default.jpg but the browser continues to loop though the images. It will never stop. Can someone hit me with some knowledge? Thanks.

    Read the article

  • How to copy x and y coordinate from one Flex component to another

    - by Tam
    Hi, I would like to base one component's x and y cooridnates according to another, I tried using the binding notation but it doesn't seem to work! <?xml version="1.0" encoding="utf-8"?> <s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:vld ="com.lal.validators.*" xmlns:effect="com.lal.effects.*" xmlns:components="com.lal.components.*" width="400" height="100%" right="0" horizontalAlign="right" verticalCenter="0"> ...... <s:VGroup width="125" height="100%" horizontalAlign="right" gap="0" width.normal="153" x.normal="247" width.expanded="199" x.expanded="201"> ...... <s:Panel includeIn="expanded" id="buttonsGroup" mouseOut="changeStateToNormal();" mouseOver="stopChangeToNormal();" skinClass="com.lal.skins.TitlelessPanel" title="hi" right="0" width="125" height="700" > ..... <s:Label text="Jump To Date" paddingTop="20" /> <s:TextInput id="wholeDate" width="100" mouseOver="stopChangeToNormal();" click="date1.visible = true" focusOut="date1.visible = false"/> ... </s:Panel> </s:VGroup> <mx:DateChooser id="date1" change="useDate(event); this.visible = false; " visible="false" mouseOver="stopChangeToNormal();" y="{wholeDate.y}" x="{wholeDate.x}" /> </s:VGroup>

    Read the article

  • Migrate style from TabItem to TabHeader

    - by OffApps Cory
    Good day! I have a TabControl with TabItems that have been customized via a control template. This control template specifies a trigger whereby on mouseover, the content of tab header grows slightly. <ControlTemplate> <Storyboard x:Key="TabHeaderGrow"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <ControlTemplate.Triggers> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <BeginStoryboard Storyboard="{StaticResource TabHeaderGrow}"/> </EventTrigger> When I mouseover any of the tabs they work as expected, however the trigger also fires when I mouseover any of the elements in the tab body. I know that I need to migrate the control styling to a tabHeader controlTemplate, but I am unsure how to do that. I can't seem to do template binding for the content of the tabheader. Any help would be appreciated.

    Read the article

  • jQuery menu animation

    - by bomortensen
    Hi Stackoverflow, I'm building a website where I'm using jQuery to animate a horizontal tabbed menu. What I want to achieve can be seen here: / link removed / If you hover/mouseover the "Link 1" tab, you'll see that a white div is expanding. Each of the tab menu items are a styled li-tag. What I want to do is, that when you hover/mouseover i.e. the "Link 2" tab, the white div contracts and then expands again with content related to "Link 2" instead of "Link 1". Also, the "Link 1" tab should be expanded by default (i.e. when you just entered the site) Does any of you jQuery ninjas out there know how to do this? What I currently have is this: <script type="text/javascript"> $(document).ready(function(){ var $div = $('#divtest'); var height = $div.height(); $div.hide().css({ height : 0 }); $('#forside').hover(function () { if ($div.is(':visible')) { $div.animate({ height: 0 }, { duration: 200, complete: function () { $div.hide(); } }); } else { $div.show().animate({ height : height }, { duration: 200 }); } return false; }); }); </script> Do I need to have 4 different div's which expands/contracts for every mouseover? If i'm not being clear about what my problem is, please say so and I'll try to elaborate :) Thanks in advance!

    Read the article

  • jquery help assigning multiple mouse events using a .each() to hide/show icons and show background c

    - by Ronedog
    Need some help assigning a mouseover event to display some icons that start out hidden. For every <li> in the ul, I have icons. When the user mouses over the <li> I want the span tag with a class called "icons" to be displayed. When the mouse out event occurs remove the class and/or just hide the span. The problem for me is how to assign event so just the span tag and its contents appear and disapear when the mouse hovers over the <li>. Heres the HTML: <ul id="nav"> <li>Cat 1 <span class="icons"> <div>stuff here</div> </span> </li> <li>Cat 2 <span class="icons"> <div>stuff here</div> </span> <ul> <li>Sub Cat 2A <span class="icons"> <div>2A stuff here</div> </span> </li> </ul> </li> </ul> Heres my jquery code. $('#nav li').each(function(){ //Add Background Shading o Mouseover to all Rows in the menu $(this).mouseover(function(){ $(this).addClass("background_grey").removeClass("icons"); }) $(this).mouseout(function(){ $(this).removeClass("background_grey").addClass("icons"); }); }); Thanks for the help.

    Read the article

  • Python - Bitmap won't draw/display

    - by Wallter
    I have been working on this project for some time now - it was originally supposed to be a test to see if, using wxPython, I could build a button 'from scratch.' From scratch means: that i would have full control over all the aspects of the button (i.e. controlling the BMP's that are displayed... what the event handlers did... etc.) I have run into several problems (as this is my first major python project.) Now, when the all the code is working for the life of me I can't get an image to display. Basic code - not working dc = wx.BufferedPaintDC(self) dc.SetFont(self.GetFont()) dc.SetBackground(wx.Brush(self.GetBackgroundColour())) dc.Clear() dc.DrawBitmap(wx.Bitmap("/home/wallter/Desktop/Mouseover.bmp"), 100, 100) self.Refresh() self.Update() Full Main.py import wx from Custom_Button import Custom_Button from wxPython.wx import * ID_ABOUT = 101 ID_EXIT = 102 class MyFrame(wx.Frame): def __init__(self, parent, ID, title): wxFrame.__init__(self, parent, ID, title, wxDefaultPosition, wxSize(400, 400)) self.CreateStatusBar() self.SetStatusText("Program testing custom button overlays") menu = wxMenu() menu.Append(ID_ABOUT, "&About", "More information about this program") menu.AppendSeparator() menu.Append(ID_EXIT, "E&xit", "Terminate the program") menuBar = wxMenuBar() menuBar.Append(menu, "&File"); self.SetMenuBar(menuBar) # The call for the 'Experiential button' self.Button1 = Custom_Button(parent, -1, wx.Point(100, 100), wx.Bitmap("/home/wallter/Desktop/Mouseover.bmp"), wx.Bitmap("/home/wallter/Desktop/Normal.bmp"), wx.Bitmap("/home/wallter/Desktop/Click.bmp")) # The following three lines of code are in place to try to get the # Button1 to display (trying to trigger the Paint event (the _onPaint.) # Because that is where the 'draw' functions are. self.Button1.Show(true) self.Refresh() self.Update() # Because the Above three lines of code did not work, I added the # following four lines to trigger the 'draw' functions to test if the # '_onPaint' method actually worked. # These lines do not work. dc = wx.BufferedPaintDC(self) dc.SetFont(self.GetFont()) dc.SetBackground(wx.Brush(self.GetBackgroundColour())) dc.DrawBitmap(wx.Bitmap("/home/wallter/Desktop/Mouseover.bmp"), 100, 100) EVT_MENU(self, ID_ABOUT, self.OnAbout) EVT_MENU(self, ID_EXIT, self.TimeToQuit) def OnAbout(self, event): dlg = wxMessageDialog(self, "Testing the functions of custom " "buttons using pyDev and wxPython", "About", wxOK | wxICON_INFORMATION) dlg.ShowModal() dlg.Destroy() def TimeToQuit(self, event): self.Close(true) class MyApp(wx.App): def OnInit(self): frame = MyFrame(NULL, -1, "wxPython | Buttons") frame.Show(true) self.SetTopWindow(frame) return true app = MyApp(0) app.MainLoop() Full CustomButton.py import wx from wxPython.wx import * class Custom_Button(wx.PyControl): def __init__(self, parent, id, Pos, Over_BMP, Norm_BMP, Push_BMP, **kwargs): wx.PyControl.__init__(self,parent, id, **kwargs) self.Bind(wx.EVT_LEFT_DOWN, self._onMouseDown) self.Bind(wx.EVT_LEFT_UP, self._onMouseUp) self.Bind(wx.EVT_LEAVE_WINDOW, self._onMouseLeave) self.Bind(wx.EVT_ENTER_WINDOW, self._onMouseEnter) self.Bind(wx.EVT_ERASE_BACKGROUND,self._onEraseBackground) self.Bind(wx.EVT_PAINT,self._onPaint) self.pos = Pos self.Over_bmp = Over_BMP self.Norm_bmp = Norm_BMP self.Push_bmp = Push_BMP self._mouseIn = False self._mouseDown = False def _onMouseEnter(self, event): self._mouseIn = True def _onMouseLeave(self, event): self._mouseIn = False def _onMouseDown(self, event): self._mouseDown = True def _onMouseUp(self, event): self._mouseDown = False self.sendButtonEvent() def sendButtonEvent(self): event = wx.CommandEvent(wx.wxEVT_COMMAND_BUTTON_CLICKED, self.GetId()) event.SetInt(0) event.SetEventObject(self) self.GetEventHandler().ProcessEvent(event) def _onEraseBackground(self,event): # reduce flicker pass def Iz(self): dc = wx.BufferedPaintDC(self) dc.DrawBitmap(self.Norm_bmp, 100, 100) def _onPaint(self, event): # The printing functions, they should work... but don't. dc = wx.BufferedPaintDC(self) dc.SetFont(self.GetFont()) dc.SetBackground(wx.Brush(self.GetBackgroundColour())) dc.Clear() dc.DrawBitmap(self.Norm_bmp) # This never printed... I don't know if that means if the EVT # is triggering or what. print '_onPaint' # draw whatever you want to draw # draw glossy bitmaps e.g. dc.DrawBitmap if self._mouseIn: # If the Mouse is over the button dc.DrawBitmap(self.Over_bmp, self.pos) else: # Since the mouse isn't over it Print the normal one # This is adding on the above code to draw the bmp # in an attempt to get the bmp to display; to no avail. dc.DrawBitmap(self.Norm_bmp, self.pos) if self._mouseDown: # If the Mouse clicks the button dc.DrawBitmap(self.Push_bmp, self.pos) This code won't work? I get no BMP displayed why? How do i get one? I've gotten the staticBitmap(...) to display one, but it won't move, resize, or anything for that matter... - it's only in the top left corner of the frame? Note: the frame is 400pxl X 400pxl - and the "/home/wallter/Desktop/Mouseover.bmp"

    Read the article

  • jquery live problem

    - by Kay
    Hi, I have a website which uses jquery and lots of mouseover/mouseout effect. So far I used the .bind() method of jquery but if you have 1000 event handlers, this is slowing down your browser a lot. So, I want to move to use .live or .delegate. One part of my portal site is a chat area. User can set chat messages which will then be displayed in a simple table. There is a feature that if you move the mouse over a chat message a trash can will appear allowing you to delete the message (if it is by you or you are a moderator). The trash bin is in the same table cell as the chat message. The problem: Using .bind() it worked like a charm. This is the old code: function CreateChatMessageContextMenu(ctrl, messageID, message, sender) { var a = document.createElement("a"); a.href = "javascript:RemoveChatMessage(" + messageID + ");" a.id = 'aDeleteChatMessage' + messageID; a.style.display = 'none'; var img = document.createElement("span"); img.className = "sprite-common messages-image sprite-common-btnDelete"; a.appendChild(img); ctrl.appendChild(a); $(ctrl) .bind('mouseover', function(event) { $('#aDeleteChatMessage' + messageID).show() }) .bind('mouseout', function(event) { $('#aDeleteChatMessage' + messageID).hide() }); return; } 'ctrl' is the reference to a table cell. Now, using .live() the trashbin also appears but it is flickering a lot and when I move the mouse over the trashbin, it is disappearing or inactive. I have the feeling that more events are thrown or something. It seems like the 'mouseout' is thrown when moving over the trashbin, but the thrashbin is inside the tablecell so mouseout should not be triggered. The new code is as follows. $(document).ready { $('.jDeleteableChatMessage').live('mouseover mouseout', function(event) { var linkID = '#aDelete' + event.target.id; if (event.type == 'mouseover') { $(linkID).show(); } else { $(linkID).hide(); } return false; }); } function CreateChatMessageContextMenu(ctrl, messageID, message, sender) { if (!UserIsModerator && (UserLogin != sender)) return; ctrl.id = 'ChatMessage' + messageID; var deleteString = 'Diese Chatnachricht löschen'; if (UserLang == '1') deleteString = 'Delete this chat message'; var a = document.createElement("a"); a.href = "javascript:RemoveChatMessage(" + messageID + ");" a.id = 'aDeleteChatMessage' + messageID; a.style.display = 'none'; var img = document.createElement("span"); img.className = "sprite-common messages-image sprite-common-btnDelete"; img.alt = deleteString; img.title = deleteString; a.appendChild(img); ctrl.appendChild(a); $(ctrl).addClass('jDeleteableChatMessage'); } I add a class to tell jQuery which chat cell have a trash bin and which don't. I also add an ID to the table cell which is later used to determine the associated trash bin. Yes, that's clumsy data passing to an event method. And, naturally, there is the document.ready function which initialises the .live() method. So, where is my mistake?

    Read the article

< Previous Page | 3 4 5 6 7 8 9 10 11 12 13 14  | Next Page >