w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
How to disable all hover effects in mobile browser?
The right way is: *{ -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; outline: none !important; }

Categories : HTML

Javascript code only effects drop-down menu links for some reason
This line: $(this).closest('nav').find('.activeAnchor').removeClass('activeAnchor'); ...will only remove the 'activeAnchor' class from elements within the same <nav> element as the item just clicked, but your top-level menus are divided into two <nav> elements. You could do this instead: $('.activeAnchor').removeClass('activeAnchor'); ...to remove the active class from any element that had it. Demo: http://jsfiddle.net/B8EPS/ Or just limit it to ones with some <nav> element anywhere on the page: $('nav .activeAnchor').removeClass('activeAnchor'); (Or whatever other combination actually matches the html structure you are using.)

Categories : Javascript

Call CSS3 hover effects with javascript mouseover event
If I got you right, you should simply change CSS of that object manually: $('button').on('click', function{ $('.animation:hover span').css('webkit-transform:rotate(52.5deg);'+ '-moz-transform:rotate(52.5deg);'+ 'rotation:52.5deg;'+ '-webkit-transform:translate(1em, 0);'+ '-moz-transform:translate(1em, 0);'+ 'translate(1em, 0);');' });

Categories : Javascript

2 mouseover/hover effects in 1 div?
Keep it simple, You don't need javascript at all. I also have simplified a lot of your markup and css. http://jsfiddle.net/USgE9/4/ <a href=""> <img src="http://foto.scigacz.pl/cache/imgs/_w750/gallery/aktualnosci/imprezy/3ci_rajd_chlorowy/img_06.jpg" alt="'" width="235" height="133"/> <div class="info">price: $200</div> </a> <div class="description">Here is the big fat description box</div> This might be too much simplification for your particular case, but gives you a good clean starting point.

Categories : Javascript

Different hover effects for tabs
you can use comb css for assigning separate image to each div as : .menu_links:hover {background-image:url('../images/holidays_bg.jpg');} .menu_links + .menu_links:hover {background-image:url('../images/holidays_bg.jpg');} .menu_links + .menu_links + .menu_links:hover {background-image:url('../images/holidays_bg.jpg');} .menu_links + .menu_links + .menu_links + .menu_links:hover {background-image:url('../images/holidays_bg.jpg');}

Categories : HTML

Hover effects in for loops
Nested loops are unnecessary, where the arrays are one-dimensional. You can try something like: var texts = ['#Bottleinthemirror'], pictures = ['#Bottleinthemirrorpic'], i, j, curText, curPicture, generateHandlers; generateHandlers = function (text, picture) { $(text).hide(); $(text + "," + picture).hover(function () { //in $(text).show(); },function () { //out $(text).hide(); }); }; for (i = 0, j = texts.length; i < j; i++) { curText = texts[i]; curPicture = pictures[i]; generateHandlers(curText, curPicture); } DEMO: http://jsfiddle.net/hQ8xt/ The immediate problem with binding events in a loop is that the event is triggered later, when the loop has finished. So by that time, the iterator (in this case, i) has re

Categories : Javascript

Image hover effects
Used to % into px as like this img:hover{ border:1px solid #0000ff; width:120px; height:120px; } Demo

Categories : HTML

Hover Effects to show Image
HTML <div class="example"> Hover over me <img src="example.com"> </div> CSS .example img { display: none; } .example:hover img { display: inline; }

Categories : CSS

hover effects on image like appears a button
Replace #wrapper .text { with .wrapper .text { And #wrapper:hover .text { with .wrapper:hover .text { wrapper is an class not an id.id will represented with # and class will represented with .

Categories : Javascript

How to "link" the hover effects of two identical nav bars
You could always fake it by "linking" the two using a common parent element: http://jsfiddle.net/jjordanca/TNeZU/ HTML: <div id="navbar"> <div id="linkone"> <a class="one" href="#">Link1</a> <a class="one" href="#">Link1</a> </div> <div id="linktwo"> <a class="two" href="#">Link2</a> <a class="two" href="#">Link2</a> </div> <div id="linkthree"> <a class="three" href="#">Link3</a> <a class="three" href="#">Link3</a> </div> </div> CSS: a { text-decoration: none; color: red; margin-right: 20px; padding: 0 10px; } #navbar { border: 1px solid red; width: 500px; margin: 50p

Categories : CSS

How to make links in a Javascript "slide out" menu work
You can do this without javascript only need to add css like this li a:hover { padding-left: 10px; } With jquery You have to add this <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type='text/javascript'> $("li a").hover(function() { $(this).stop().animate({paddingLeft : "10px"},200); },function() { $(this).stop().animate({paddingLeft : "0px"},200); }); </script> DEMO

Categories : Jquery

Dual hover-effects for nested list items in CSS
You want to declare the :hover on the li and then select the img or the title after that. Also, your markup could be a bit better. For example: <li class="item"> <a href="#"> <img src="http://placekitten.com/g/200/300" /> <br /> <span class="p_title">Entry 6</span> </a> </li> li.item:hover img { opacity: 1; } li.item:hover { background-color: #fb8008; }

Categories : HTML

Menu item hover effects and sublist hovering
Live demo: http://jsfiddle.net/TBRgu/2/ Change this: .left-sidebar .box li li a:hover To this: .left-sidebar #menu-kutsemeistrivoistlused > li > ul > li:hover > a Change the width as below: .left-sidebar .box li li li a{ background: none; padding-left: 4px; width: 186px; /* changed from 165px */ border:0; }

Categories : Jquery

How to prevent sticky hover effects for buttons on touch devices
You could set background-color on :active state and give :focus the defaut background. if you set background-color via onfocus/ontouch, color style remains once :focus state has gone. You need a reset on onblur as well to restore defaut bg when focus is lost.

Categories : Javascript

visibility property effects fade effects. Is there an other way to make items invisible without breaking fade effects?
Use of one the following alternatives: position:absolute; left: -9999px; position:absolute; clip: rect(0, 0, 0, 0); position:absolute; z-index:-1;

Categories : Misc

Can't get JavaScript for mobile menu for Drupal 7.x-5.x theme to work
I got it working by a few adjustments, including moving the declaration fo rhte adjustMenu variable to above where it's being called. Entire javscript now looks like this: (function ($) { Drupal.behaviors.mobile_menu_toggle = { attach: function (context, settings) { var ww = $(window).width(); var adjustMenu = function() { if (ww < 768) { // if "more" link not in DOM, add it if (!$(".more")[0]) { $('<div class="more">&nbsp;</div>').insertBefore($('.parent')); } $(".toggleMenu").css("display", "inline-block"); if (!$(".toggleMenu").hasClass("active")) { $(".menu").hide(); } else {

Categories : Javascript

uitextview dataDetectorTypes doesn't work with short links like bitly links
The link should be auto-detected and tappable without a problem. Make sure that: Your UITextView instance isn't editable Your UITextView dataDetectorTypes includes UIDataDetectorTypeLink

Categories : Iphone

jQM - Javascript doesn't work in 'file.html' when use $.mobile.changePage
The scripts you want executed on that page need to be handled on the pageinit or pagechange event in jQm. Go read the scripting section on the jQm docs.

Categories : Javascript

:hover links not working
Try like this: .nav-color a:hover{ color: #e67d20; } DEMO Visit Pseudo Classes CSS Selctors

Categories : CSS

Hover links disappear before you can click them
Try adding height #header ul li a{ text-decoration:none; font-size:22px; color:white; font-weight:bold; height:30px; line-height:30px; margin-left:10px; }

Categories : CSS

CSS Hover effect with links not working in IE8
You may use IE8.js Usage: If you want to support browser IE7+ then integrate thise code into your head tag: <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]--> Or if you downloaded it then you may use this code: <!--[if lt IE 7]> <script src="ie7/IE7.js" type="text/javascript"></script> <![endif]--> You can use squish to fix more of your problems. You can do that by adding another line after the 1st include: <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7-squish.js" type="text/javascript"> Or <script src="ie7/ie7-squish.js" type="text/javascript">

Categories : Jquery

CSS Menu moving links left on hover
Try this css: #menu { float:right; } #menu > ul > li { display:inline; float:left; color:#FFFFFF; margin-right:20px; padding:5px; text-decoration:none; font-size:20px; } #menu > ul > li > a:hover { display:inline; float:left; color:#CCC; margin-right:20px; padding:5px; text-decoration:none; font-size:20px; }

Categories : HTML

jQuery fade out div on hover. Links not selectable
Try changing the jQuery to this: $('#container').hover(function() { $('#show').fadeOut("slow"); }, function() { $('#show').fadeIn("slow"); }); Working fiddle: http://jsfiddle.net/BJwn7/86/

Categories : Jquery

Equal length background box around links on a:hover
Give the link a set width. You will need to setdisplay:block for an a tag to respect height and width values a:link { color: white; text-decoration: none; padding: 10px; display: block; width: 100px; }

Categories : HTML

How to transition a:links based on parent div :hover
Here is jquery solution and working Demo -> DEMO $('.floating-menu').mouseover(function() { $('.floating-menu a').css("display","block"); }); $('.floating-menu').mouseleave(function() { $('.floating-menu a').css("display","none"); });

Categories : CSS

Dynamically generated html links work in Firefox but does not work in Chrome
Have you ever tried the preventDefault ? You should use preventDefault which is the default behaviour when you click the link. Besides the links should not be inside the div #rContent ? You are using .on so the links should be inside the parent.

Categories : Jquery

jQuery effects doesn't work when I refresh the page next time
You want to initialise the autocomplete on page load, then on subsequent ajax requests you want to assign the source via the setter method: $(document).ready(function() { $("#searchbox").autocomplete({ source: [] }); $("#sendemp").click(function(e) { e.preventDefault(); var submit_val = $("#searchbox").val(); //alert('submitval is ' + submit_val); $.ajax( { type : "POST", //dataType :"jason", url : "./wp-admin/admin-ajax.php", data : { action : 'employee_pimary_details', user_name : submit_val }, success : function(data) { // alert('hhh'); $('#accordion21').

Categories : Jquery

I am trying to run this chain of effects but it doesn't work. Syntax is right but method is wrong?
From the name of element where you attaching event handler I infer that it is submit button. If it is so - you need to pass event to your click handler and call event.preventDefault();: $('#submitme').click(function(e) { e.preventDefault(); //then your code $('#submitme').fadeOut(500,..... }); Also you can break your code on several different functions and use queue method to chain animations: function animateProgress(){ $('#progress').delay(500) .fadeIn(500) .queue(/*next callback function*/); } function animateSubmitMe(){ $('#submitme').fadeOut(500) .queue(animateProgress); } animateSubmitMe();

Categories : Jquery

Unit Of Work side effects could be fixed with TransactionScope, but it is not available with MySql.Data
Finally I decided to use Flush() any time I would have used nested transaction Commit(). It seems to work OK, I get the exceptions at that moment and I am able to treat them locally. I know that NHibernate best practices include not to use Flush() so liberally, but I didn't find a better solution as far as nested transactions are not available with MySql and NHibernate, so this seems to be the lesser evil.

Categories : Mysql

'Icon already includes gloss effects' doesn't work on iOS 6 compiled on xCode 5 with SDK 7
As iOS7 is not under NDA anymore, here is the answer : In Xcode 5 select Images.xcassets followed by your icon set. There is a "pre-rendered icon" setting that removes the gloss

Categories : IOS

hover in mobile safari
Ok I tested that with Safari and it is working (using a Mac). Using Safari on iPhone not... you have to use Javascript; try this: $('.slidebutton').mouseover(function(event) { //apply the css property }).mouseout(function(event) { //apply the css property (reverse) });

Categories : CSS

Mobile site links go static
Links don't work in Dolphin Browser, but they work on Firefox and Chrome - Android 4.1 (hover works on click, but it's normal for touch screen). Change .navicon to display: inline-block; - it's a fix for clickability issue in WebKit.

Categories : CSS

iPad/iPhone hover causes the user to double click a link is solved. But what to do with fancybox links
You could just trigger a click event on the fancybox selector instead of the window.location. So tweaking the code in your second jsfiddle you could do : $(document).ready(function () { $('.fancybox').fancybox(); $('a').on('click touchend', function (e) { var fancy = this.className.indexOf('fancybox') != -1; if (fancy) { $(this.className).trigger("click") } else { // var el = $(this); // var link = el.attr('href'); // simply use this.href window.location = this.href; return false; } }); }); See your updated JSFIDDLE NOTE : you may have the same issue hovering the fancybox navigation arrows if you have a gallery, in that case you may have to trigger the $.fancybox.next() and $.fan

Categories : Jquery

Bootstrap nav-collapse links not working on mobile
Check that you are using the most up to date jQuery. I was having the same problem with the Bootstrap theme for Drupal, but solved this problem by changing the settings in jQuery Update to the most up to date!

Categories : Javascript

jQuery mobile data-transition on all links
You can set defaults of jQuery Mobile this way. <head> <script src='jquery.js'></script> $(document).on('mobileinit', function() { $.mobile.defaultPageTransition = 'pop'; // pages / popup transition $.mobile.defaultDialogTransition = 'pop'; // dialogs }); <script src='jquery_mobile.js'></script> </head> Such settings should be loaded after jQuery and before jQuery Mobile is loaded.

Categories : Jquery

MVC links not working in jquery mobile app environment
Here is solution I found which solved my problem finally. Here is how my code looks now..in _Layout.Mobile.cshtml @System.Web.Optimization.Scripts.Render("~/bundles/jquery") @System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile") <script type=”text/javascript” src=”@Url.Content("~/Scripts/jquery-2.0.2.min.js")"></script> <script type=”text/javascript”> $(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; }); </script> <script type=”text/javascript” src=”@Url.Content("~/Scripts/jquery.mobile-1.3.1.min.js")"></script> I found some more information with this problem Here. Hope this helps others

Categories : Asp Net Mvc

How to trigger two effects on a single event in javascript
<input type="password" placeholder="Password"> will be better suited for what you are trying to do. However, to answer your question: Just put both statements in the same handler: onkeypress="if (this.value=='Password') this.value = ''; this.type = 'password';" Notice that you will get problems with Internet Explorer which does not allow changing the type of an input element. See also this answer.

Categories : Javascript

Why do my image links not work in chrome, even though they work in IE?
First of all you are using id="right" many times which is incorrect. Also try to use selectors in right way : .latest_work a:hover img{ opacity: 1.0; color: #666; border: 2px solid #ddd; }

Categories : HTML

Selectively open links in mobile browser and App using shouldOverrideUrlLoading?
your initital thoughts are correct. in fact, I beleive shouldOverrideUrlLoading() is a part of the API for doing exactly that. open the url in the app = super.shouldOverrideUrlLoading(); mYourWebViewInstance.loadUrl(url); return true; open the url in the mobile browser = Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(url )); startActivity(browserIntent); return true; this code will launch directly app that can handle this data type, which be in this case any browser app installed on your device, or will give you intent chooser to select one of your browsers to show the url if you have more then one web browsers installed and none of them set to be default (always open with...) returning true according to the documentation means you handled the url yourself, and

Categories : Android

JQuery mobile handling links (return false)
You may try to set a click event on the links for which you want to prevent a default behavior. In the example below, we add a class special_link to the link for which we want to do something special before being redirected to another page. When we click on the "special" link, we check if a given condition is followed or not before deciding to redirect the user to another page. The redirection (with all the transitions stuffs) to another page (page_2 in our example), is done manually, with the following code: $.mobile.changePage( "#page_2", { transition: "slide", }); Fo more information about the method $.mobile.changePage, you can check the online doc: http://api.jquerymobile.com/jQuery.mobile.changePage/ In following example, if you type a 1 in the text input, you'll not be red

Categories : Jquery



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.