Change tooltip text on toggle switch - javascript

How to change the tooltip text on the toggle switch.
1) Firstly by default, I have to give some tooltip
2) Also, whenever I click on toggle switch I have to change the tooltip
But the below code is not working properly
Problem
1) The tooltip which I am getting is not correct. It is not coming from the foundation. Can anyone tell me how we can make this tooltip beautify or just add a class of foundation
Can anyone guide me where I am doing wrong
I am using
Foundation 5
<ul class="header-info details collapse ch_en_switch">
<li class="switch small" onclick="chn_tooltip" id="chinese_toggle_tooltip" aria-haspopup="true" title="click to see player name in chinese">
<span class="switch_text">EN</span>
<input id="chn_eng_toggle" onclick="chinese_toggle" type="checkbox">
<label for="chn_eng_toggle"></label>
<span class="switch_text">CH</span>
</li>
</ul>
function open_tooltip(){
$(this).click(function(e){
if ( $( '#chn_eng_toggle' ).is(':checked') ){
$( '#chinese_toggle_tooltip' ).attr( 'title', '' )
$( '#chinese_toggle_tooltip' ).attr( 'title', 'click to see player name in english' ).foundation('toggle')
}
else{
$( '#chinese_toggle_tooltip' ).attr( 'title', '' )
$( '#chinese_toggle_tooltip' ).attr( 'title', 'click to see player name in chinese' ).foundation('toggle')
}
});
}

try this https://jsfiddle.net/pnnvqj6g/
<ul class="header-info details collapse ch_en_switch">
<li class="switch small" data-tooltip-class="aniket" id="chinese_toggle_tooltip" data-tooltip aria-haspopup="true" title="">
<span class="switch_text">EN</span>
<input id="chn_eng_toggle" type="checkbox" onclick="open_tooltip()">
<label for="chn_eng_toggle"></label>
<span class="switch_text">CH</span>
</li>
</ul>
function open_tooltip(){
if ($("#chn_eng_toggle").is(":checked")) {
$('#chinese_toggle_tooltip').attr('title', 'aniket');
} else {
$('#chinese_toggle_tooltip').attr('title', 'shivam');
}
}

In your JavaScript code snippet, $( this ) returns an undefined elements. Change it to:
if( $ ( '#chn_eng_toggle' ).is( ':checked' ) )
function open_tooltip () {
if ( $( '#chn_eng_toggle' ).is( ':checked' ) )
$( '#chinese_toggle_tooltip' ).attr( 'title', 'aniket' )
else
$( '#chinese_toggle_tooltip' ).attr( 'title', 'shivam' )
}
</script>
label {
position: relative;
display: inline-block;
width: 40px;
height: 12px
}
label input {
display:none
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s
}
.slider:before {
position: absolute;
content: "";
height: 8px;
width: 18px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s
}
input:checked + .slider {
background-color: #2196F3
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3
}
input:checked + .slider:before {
-webkit-transform: translateX(18px);
-ms-transform: translateX(18px);
transform: translateX(18px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header-info details collapse ch_en_switch">
<li class="switch small" onclick="open_tooltip( event )" data-tooltip-class="aniket" id="chinese_toggle_tooltip" aria-haspopup="true" title="shivam">
<span class="switch_text">EN</span>
<label for="chn_eng_toggle">
<input id="chn_eng_toggle" type="checkbox">
<span class="slider"></span>
</label>
<span class="switch_text">CH</span>
</li>
</ul>

Related

How do I align text/class with the button in the <style> tag when it won't center in css or style tag?

I put margin-auto in the toggle class on my site. It sort of went it the middle but it didn't align with the button. Do I need to do something in CSS or JavaScript and what should I place there?
<style>
.toggler { width: 500px; height: 200px; position: relative; margin-top:0; margin-right:auto; margin-bottom:0;
}
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
.kiri{text-align:center;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 50 };
} else if ( selectedEffect === "transfer" ) {
options = { to: "#button", className: "ui-effects-transfer" };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// Run the effect
$( "#effect" ).effect( selectedEffect, options, 500, callback );
};
// Callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// Set effect from select menu value
$( "#button" ).on( "click", function() {
runEffect();
return false;
});
} );
</script>
</head>
<body>
<nav>
<ul>
<li>Contact</li>
<li>JQUERY TIPS</li>
<li>JS TIPS</li>
<li>Info</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<h2>Jquery Tips</h2>
<p id="js">JavaScript/jQuery is a programming language that you can use to add interactivity to your web page.</p>
<p id="poo"> if you put your mouse over the sentence above there will be a light blue highlight the lightgray background that was made using the <span class="pink">onmouse event.</span>
<div class="footer">
<span class="flatorange">#2016-20XX &#8226 Nia Daniels &#8226 FINAL EXAM &#8226 CIST1520 </span><br>
<span class="flatblue">Scripting Technologies</span><br>
<span class="flatgreen">Mr.Cash</span><br>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">2 Jquery Effects</h3>
<p id="hmm">eres una mujer o hombre? soy una mujer. quiero una pizza. queires una pizza o no?</p>
</div>
</div>
<div class="kiri">
<select name="effects" id="effectTypes">
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
</select></div>
<div class="kiri">
<button id="button" class="ui-state-default ui-corner-all">Run Le Effect</button></div>
<script>
Add margin: 0 auto; to both .toggler and #effect and it should do the trick. Since you set a width on #effect you'll need the auto margin to handle the centering for you.

move div from left to right and then stop

do you know how to move the div.move from left to right 1px per second? And stop the move of the div when the div arrives to .stop div?
https://jsfiddle.net/z2mjvbss/4/
<div class="content">
<div class="stop">
stop
</div>
<div class="move">
</div>
</div>
<button id="go">
go
</button>
$( "#go" ).click(function() {
$( ".move" ).animate({
opacity: 0.25,
left: "+=5000px",
height: "toggle"
}, 5000, function() {
});
Change your JS code to following
$( "#go" ).click(function() {
var stop = $(".stop").offset().left;
$( ".move" ).animate({
opacity: 0.25,
left: stop-($(".stop").width()+$(this).width()),
height: "toggle"
}, 5000, function() {}
);
});
And your CSS to this
.content {
width: 500px;
height: 500px;
margin: 10px;
border: 10px solid green;
background:yellow;
overflow-x:scroll;
padding:10px;
position: relative;
}
.stop{
float:right;
background:brown;
}
.move{
left:0;
background:brown;
height:100%;
width:10px;
opacity:0.2;
position: absolute;
}
Fiddle
Here's the modified fiddle
https://jsfiddle.net/z2mjvbss/6/
You can stop it at a particular location by modifying the final value of left.
Code for backup
$( "#go" ).click(function() {
$( ".move" ).animate({
opacity: 0.25,
left: "200px",
}, 5000, function() {
});
});
You can try this......
HTML
<div class="content">
<div class="stop">
stop
</div>
<div class="move">
move
</div>
</div>
<button id="go">
go
</button>
CSS
.content{float:left; width:100%;background:#FFFFFF;}
.move{float:left;width:100px;background:black;color:white;}
.stop{float:right;width:100px;background:red;}
JS
$("#go").on("click",function(){
goOnePixelRight();
});
function goOnePixelRight(){
var top=$(".move").offset().top;
var left=$(".move").offset().left;
$(".move").offset({top:top,left:left+1});
if(parseInt($(".move").offset().left)!=parseInt($(".stop").offset().left)){
setTimeout("goOnePixelRight();",1000);
}
}
You can achieve it using requestanimationframe. The below article explains it more with an example. Here it moves 7px , but you can change it to 1px.
https://link.medium.com/JrgbH9gdf8

modifying a script to be more like an actual banner slider

I am trying to figure out how to modify this code that I found on stackoverflow to work more like an actual slider.
http://jsfiddle.net/5Lc7cc7u/
1) If on last slider image, I want the next to go back to the first slide.
2) If on the first slider image, I want the back to go back to the last slider image.
3) Is there an easy way to add fade to this to where I can choose between slide and fade?
Thanks!
javascript:
$( "#move_left_button" ).click( function() {
move_left();
} );
$( "#move_right_button" ).click( function() {
move_right();
} );
function move_left() {
if( get_acct_left() >= -480 ) {
$( "#moving_part" ).animate( {
left: "-=480px"
}, 1000, function() {
if( get_acct_left() <= -480 * 2 ) {
$( "#moving_part" ).attr( "data-direction", "to_right" );
}
} );
}
}
function move_right() {
if( get_acct_left() < 0 ) {
$( "#moving_part" ).animate( {
left: "+=480px"
}, 1000, function() {
if( get_acct_left() >= 0 ) {
$( "#moving_part" ).attr( "data-direction", "to_left" );
}
} );
}
}
function get_acct_left() {
return parseInt( $( "#moving_part" ).css( "left" ) );
}
function move_to_next() {
if( $( "#moving_part" ).attr( "data-direction" ) === "to_left" ) {
move_left();
} else {
move_right();
}
}
setInterval( move_to_next, 4000 );
HTML:
<div id="images_holder">
<div id="move_left_button">LEFT</div>
<div id="move_right_button">RIGTH</div>
<div id="moving_part" data-direction="to_left">
<div class="image_holder">
<span>image 1</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 2</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 3</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
</div>
</div>
CSS:
#images_holder {
position: relative;
overflow: hidden;
width: 480px;
height: 360px;
color: red;
}
#moving_part {
position: absolute;
top: 0;
width: 1440px; /* image_width * number_of_images */
height: 360px;
left: 0;
}
.image_holder {
float: left;
width: 480px;
height: 360px;
position: relative;
}
.image_holder span {
position: absolute;
top: 20px;
left: 200px;
}
#move_left_button {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
#move_right_button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
jsBin demo
Whoever coded that code you shared... it's a total mi(e)ss.
Some constructive reasons:
z-indexing elements position can be avoided by properly formatting HTML placing elements in a more natural order.
<OVERLAY element> >> BUT WHY?
<underlay element>
-------------------------------
<underlay element>
<OVERLAY element> >> CORRECT
There's no mean to hardcode the sliding DIV width inside the CSS. Should be dynamic
The slide interval should be stopped while the gallery is operated by the user. Clear the interval on gallery hover
Spaghetti code should be avoided. Count slides. Count widths. Separate your logic into functions.
Images should have an alt attribute with the image description. That alt attribute is available to the user from every decent CMS editor. So why not use that data instead of hardcoding it? (Just a suggestion)
Don't create separate code for the fade effect. With a proper HTML and CSS setup it's just about a couple of lines of jQuery to change the gallery effect (see var efx in the example below) and the related animate code.
"good UI = UX up". All users are already accustomed to a widely (properly) used gallery animation logic, and that's if you click on NEXT button > animates the container to the left. (reverse for PREV)
Here you go, simply change the efx variable and see it happen:
jQuery(function( $ ){
var efx = "fade", // "slide" || "fade"
animationTime = 600, // Modify mSeconds as desired
pauseTime = 4000,
$gal = $("#images_holder"), // Cache your elements
$mov = $("#moving_part"),
$sli = $mov.find("> div"),
$btn = $("#prev, #next"),
$dsc = $("#description"),
w = $gal.width(), // Calculate the gallery width!
n = $sli.length, // Get the number of slides
c = 0, // Counter // Start index
itv; // Interval
$mov.width(w*n); // Dynamically set the width
// SETUP (fade or slide?)
if(efx==="fade") $sli.css({position:"absolute", left:0}).fadeOut(0).eq(c).fadeIn(0);
function populateDescription() {
$dsc.text( $sli.eq(c).find("img").attr("alt") );
}
function anim() {
c = c<0 ? n-1 : c%n; // loop-back counter if exceeds
populateDescription();
if (efx==="fade") {
$sli.fadeOut(animationTime).eq(c).stop().fadeIn(animationTime);
}else if(efx==="slide") {
$mov.stop().animate({left: -c*w});
}
}
function auto() {
$btn.stop().fadeOut(); // Hide buttons while autosliding
$dsc.stop().fadeOut(); // Hide descriptions while autosliding
itv = setInterval(function(){
++c; // Increment (just like we do on NEXT click)
anim(); // and animate!
}, pauseTime); // Do every "pause" mSeconds
}
function pause() {
$btn.stop().fadeIn();
$dsc.stop().fadeIn();
return clearInterval( itv ); // Clear any ongoing interval!
}
$gal.hover(pause, auto);
$btn.on("click", function(){
c = this.id==="next" ? ++c : --c; // If next>increment, else decrement
anim(); // Animate!
});
populateDescription(); // Init the first slide description
auto(); // Start the autoslide!
});
#images_holder {
background: red;
position: relative;
overflow: hidden;
height: 360px;
width: 480px;
}
#moving_part {
position: absolute;
height: inherit;
left: 0;
}
#moving_part > div {
position: relative;
height: inherit;
width: 480px;
float: left;
}
#moving_part > div img{
width: 100%;
}
#prev, #next {
position: absolute;
cursor: pointer;
top: 47%;
display: none; /* hide initially */
-webkit-user-select: none;
user-select: none;
}
#next{
right: 0px;
}
#description{
color: #fff;
background: rgba(0,0,0,0.4);
text-align: center;
position: absolute;
padding: 15px;
right: 0;
left: 0;
display: none; /* hide initially */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images_holder">
<div id="moving_part">
<div>
<img alt="Image 1" src="//placehold.it/400x300/c7a&text=1">
</div>
<div>
<img alt="Image description 2" src="//placehold.it/400x300/ac7&text=2">
</div>
<div>
<img alt="Image 3" src="//placehold.it/400x300/7ca&text=3">
</div>
</div>
<div id="prev">PREV</div>
<div id="next">NEXT</div>
<div id="description">Test</div>
</div>
Want to add navigation buttons to the code above? No problem:
It's easy to do it cause of the way we used functions. Style your span buttons inside CSS, Inside HTML just create a parent element like <div id="navigation"></div>.
With jQuery we'll automagically append span buttons to it:
var $nav = $("#navigation"); // Our buttons parent
var $navBtns; // Later, our SPAN buttons
var spans = "";
for(var i=0; i<n; i++) { // `n` is the number of slides!
spans += "<span>"+ (i+1) +"</span>";
}
// Finally append our generated buttons:
$nav.append( spans );
// Retrieve the created buttons and do something on click
$nav.find("span").on("click", function(){
c = $(this).index(); // Set our counter to the clicked SPAN index
anim(); // Animate. That easy.
});
Demo with navigation buttons
here you go: from last it goes back to first (since point 1 is done there is no case 2)
number and size of image holder is no longer hardcoded in js
$( "#move_left_button" ).click( function() {
move_left();
} );
$( "#move_right_button" ).click( function() {
move_right();
} );
var imgNum=$('.image_holder').length;
var imgWidth=parseInt($('.image_holder').css( "width"));
$( "#moving_part" ).css( "width" ,imgNum*imgWidth +"px" );
function move_left() {
if( get_acct_left() >= -imgWidth*imgNum) {
$( "#moving_part" ).animate( {
left: '-='+imgWidth
}, 1000, function() {
if( get_acct_left() <=( -imgWidth * ((imgNum)-1)) ) {
$( "#moving_part" ).attr( "data-direction", "to_right" );
}
} );
}
}
function move_right() {
if( get_acct_left() < 0 ) {
$( "#moving_part" ).animate( {
left: '+='+imgWidth
}, 1000, function() {
if( get_acct_left() >= 0 ) {
$( "#moving_part" ).attr( "data-direction", "to_left" );
}
} );
}
}
function get_acct_left() {
return parseInt( $( "#moving_part" ).css( "left" ) );
}
function move_to_next() {
if( $( "#moving_part" ).attr( "data-direction" ) === "to_left" ) {
move_left();
} else {
move_right();
}
}
setInterval( move_to_next, 4000 );
#images_holder {
position: relative;
overflow: hidden;
width: 480px;
height: 360px;
color: red;
}
#moving_part {
position: absolute;
top: 0;
width: 480px;
height: 360px;
left: 0;
}
.image_holder {
float: left;
width: 480px;
height: 360px;
position: relative;
}
.image_holder span {
position: absolute;
top: 20px;
left: 200px;
}
#move_left_button {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
#move_right_button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
<div id="images_holder">
<div id="move_left_button">LEFT</div>
<div id="move_right_button">RIGTH</div>
<div id="moving_part" data-direction="to_left">
<div class="image_holder">
<span>image 1</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 2</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 3</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 4</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
</div>
</div>
http://jsfiddle.net/5Lc7cc7u/8/
enjoy
Fade version
$("#move_left_button").click(function () {
move_left();
});
$("#move_right_button").click(function () {
move_right();
});
var imgNum = $('.image_holder').length;
var imgWidth = parseInt($('.image_holder').css("width"));
$("#moving_part").css("width", imgNum * imgWidth + "px");
function move_left() {
if (get_acct_left() >= -imgWidth * imgNum) {
$("#moving_part").fadeOut(500, function () {
$("#moving_part").css("left", (get_acct_left() - imgWidth))
if (get_acct_left() <= (-imgWidth * ((imgNum) - 1))) {
$("#moving_part").attr("data-direction", "to_right");
}
$("#moving_part").fadeIn(500, function () {});
});
}
}
function move_right() {
if (get_acct_left() < 0) {
$("#moving_part").fadeOut(500, function () {
$("#moving_part").css("left", (0))
$("#moving_part").attr("data-direction", "to_left");
$("#moving_part").fadeIn(500, function () {});
});
}
}
function get_acct_left() {
return parseInt($("#moving_part").css("left"));
}
function move_to_next() {
if ($("#moving_part").attr("data-direction") === "to_left") {
move_left();
} else {
move_right();
}
}
setInterval(move_to_next, 4000);
#images_holder {
position: relative;
overflow: hidden;
width: 480px;
height: 360px;
color: red;
}
#moving_part {
position: absolute;
top: 0;
width: 480px;
height: 360px;
left: 0;
}
.image_holder {
float: left;
width: 480px;
height: 360px;
position: relative;
}
.image_holder span {
position: absolute;
top: 20px;
left: 200px;
}
#move_left_button {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
#move_right_button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images_holder">
<div id="move_left_button">LEFT</div>
<div id="move_right_button">RIGTH</div>
<div id="moving_part" data-direction="to_left">
<div class="image_holder"> <span>image 1</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder"> <span>image 2</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder"> <span>image 3</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder"> <span>image 4</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
</div>
</div>
http://jsfiddle.net/h3cnn0xv/

jQuery focus is not working?

I have been trying to add focus function to my specific input i.e want to show a div on focus with class as : .search_by_name but it's not working so if you people please take a look at my code that what I am doing wrong please?
Here is code as :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.search_by_business_name {
background: #474747;
display: none;
width: 297px;
margin-left: 179px;
margin-top: 15px;
height: 15px;
position: absolute;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.arrow-up_search_by_business_name {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #474747;
position: relative;
top: -8px;
left: 20px;
}
.search_by_business_name_text {
background: #99cc33;
font-family: Arial;
font-style: italic;
color: #fff;
padding: 7px;
font-size: 14px;
text-align: left;
padding-left: 15px;
margin-top: -4px;
}
</style>
<input type="text" class="search_input" id="search_by_business_name_input" placeholder="Hi Ruyben, what do you want to find today ?">
<div class="search_by_business_name">
<div class="arrow-up_search_by_business_name"></div><!-- end div arrow-up_search_by_business_name -->
<div class="search_by_business_name_text">Search by business name, or keyword</div><!-- end div search_by_business_name_text -->
</div><!-- end div search_by_business_name -->
<script>
$( "#search_by_business_name_input" ).focus(function() {
$( this ).next( ".search_by_business_name" ).css( "display", "block" );});
</script>
Please have a look at live version as : http://huntedhunter.com/waseem_jobs/pacific_site/index.html
As I explained in the comments, you should not use .next() as the element you are looking for is not the next sibling of the target element.
Also .focus() takes only one function as argument, you need to use .blur() to hide the element
$("#search_by_business_name_input").focus(function () {
$(".search_by_business_name").show();
}).blur(function () {
$(".search_by_business_name").hide();
});
The script should be inside the <body> tag.
In your page the script is after </body></html>
<script>
$( document ).ready(function() {
$( "#search_by_business_name_input" )
.focus(function() {
$( ".search_by_business_name" ).show();
})
.blur(function() {
$( ".search_by_business_name" ).hide();
});
});
</script>
</body>
</html>
Edit:
Of course it does not work.
Have you read the documentation for $.next()?
.next()
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Replace this:
$( this ).next( ".search_by_business_name" ).css( "display", "block" );
With:
$( ".search_by_business_name" ).css( "display", "block" );
Edit2:
Wrap your code in $.ready:
$( document ).ready(function() {
$( "#search_by_business_name_input" )
.focus(function() {
$( ".search_by_business_name" ).show();
})
.blur(function() {
$( ".search_by_business_name" ).hide();
});
});
You should put
<script>
$( "#search_by_business_name_input" ).focus(function() {
$( ".search_by_business_name" ).show();
});
</script>
at the bottom of body element, because when excute this code,
$("#search_by_business_name_input" ) = []
or
you can write it like this
$(document).on("focus", "#search_by_business_name_input", function(){
$( ".search_by_business_name" ).show();
})

addClass and removeClass

I'm not getting used to write some code in jquery but trying hard.
Making an poll application and I want to show different backgrounds to user when their click one of two button in my page.
div tag
<div id="soruBtnSol" class="bgsol">
<!-- solbuttonbg -->
<a class="sorubtn<?=$i?>1" href="javascript:;" rel="<?=$i?>">
<span id="userCevap" class="sorubtnTxtSol">
<em class="<?php echo $soruCevapId[0]; ?>" style="visibility:visible">
<?=$question[0]?>
</em>
</span>
</a>
</div>
jquery
$('#soruBtnSol').on('click', function(e){ // FORM GONDER BUTTON EVENT
var grupid = 'groupId='+$("#groupIdd").attr('class');
var cevapid = 'cevapId='+$("#cevapIdd").attr('class');
var usercevapid = 'userCevap='+$("#userCevap").find('em').attr('class');
console.log(grupid); //example : 45
console.log(cevapid);
console.log(usercevapid);
if(cevapid != usercevapid) {
$( "#soruBtnSol" ).removeClass( "bgsol" ).addClass( "fail" );
}
if(cevapid == usercevapid) {
$( "#soruBtnSol" ).removeClass( "bgsol" ).addClass( "success" );
currentskor = 5;
}
});
EDIT : CSS ADDED
#soruBtnSol {
position: absolute;
top: 50%;
left: 80px;
width: 192px;
height: 75px;
margin-left: -75px;
z-index: 3;
float: left;
}
.bgsol {
background: url("../img/btn-left.png") no-repeat;
}
.fail {
position: absolute;
background: url("../img/fail.png") no-repeat;
z-index: 4;
}
.success {
position: absolute;
background: url("../img/success.png") no-repeat;
z-index: 4;
}
I want to change <div id="soruBtnSol" class="bgsol"> into <div id="soruBtnSol" class="fail"> if users gave wrong answer. if not, class will be success.
I do might have some issues in if() condition in jquery.
Any suggestions?
Try this
$('#soruBtnSol').on('click', function(e){ // FORM GONDER BUTTON EVENT
var grupid = 'groupId='+$("#groupIdd").prop('class');
var cevapid = 'cevapId='+$("#cevapIdd").prop('class');
var usercevapid = 'userCevap='+$("#userCevap").find('em').attr('class');
console.log(grupid); //example : 45
console.log(cevapid);
console.log(usercevapid);
if(cevapid != usercevapid) {
$(this).removeClass("bgsol").addClass("fail");
}
if(cevapid == usercevapid) {
$(this).removeClass("bgsol").addClass("success");
currentskor = 5;
}
});

Categories

Resources