I basically want for the visitor to be able to click on a picture and for the background to change :
<div class="box1">
<ul id="bgbg">
<li id="bg1"> </li>
<li id="bg2"> </li>
<li id="bg3"> </li>
</ul> </div>
$(document).ready(function() {
$( "#bgbg > li" ).click(function() {
$( 'body' ).removeClass('bg1 bg2 bg3');
$( 'body' ).addClass( $(this).attr('id') );
});
});
But it's not working ...
EDIT : It was due to the jQuery’s Compatibility Mode of wordpress - Link
jQuery(document).ready(function() {
jQuery( "#bgbg > li" ).click(function() {
jQuery( 'body' ).removeClass('bg1 bg2 bg3');
jQuery( 'body' ).addClass( jQuery(this).attr('id') );
});
});
I belive you have mistake in selector. It should be:
$(document).ready(function() {
$( ".box1 li" ).click(function() { //check selector
$( 'body' ).removeClass('bg1 bg2 bg3');
$( 'body' ).addClass( $(this).attr('id') );
});
});
Here's a working example
$(document).ready(function() {
$( "#bgbg > li" ).click(function() {
$( 'body' ).removeClass('bg1 bg2 bg3');
$( 'body' ).addClass($(this).attr('id')) ;
alert($(this).attr('id'));
});
});
#bg1{
width:60px;
height:60px;
background:url('https://www.w3schools.com/css/trolltunga.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
#bg2{
width:60px;
height:60px;
background:url('http://hdwallpaperfun.com/wp-content/uploads/2015/07/Big-Waves-Fantasy-Image-HD.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
#bg3{
width:60px;
height:60px;
background:url('http://i.dailymail.co.uk/i/pix/2014/12/19/2429637D00000578-0-image-a-284_1419003100839.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
.bg1{
background:url('https://www.w3schools.com/css/trolltunga.jpg');
}
.bg2{
background:url('http://hdwallpaperfun.com/wp-content/uploads/2015/07/Big-Waves-Fantasy-Image-HD.jpg');
}
.bg3{
background:url('http://i.dailymail.co.uk/i/pix/2014/12/19/2429637D00000578-0-image-a-284_1419003100839.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="box1">
<ul id="bgbg">
<li id="bg1"> </li>
<li id="bg2"> </li>
<li id="bg3"> </li>
</ul> </div>
</body>
You are have a mistake in select a element:
Use the way i use in this code (You can use this code also to add att ):
<script>
$('your element #id or .class or name').attr('att name','value');
</script>
i did something similar recently and went with this approach
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-default waves-effect bg-btn" data-img="bg1.jpg">1</button>
<button type="button" class="btn btn-default waves-effect bg-btn" data-img="bg2.jpg">2</button>
<button type="button" class="btn btn-default waves-effect bg-btn" data-img="bg3.jpg">3</button>
</div>
$(document).ready(function(){
$('.bg-btn').click(function(){
var img = 'images/' + $(this).data('img');
$('body').css('background-image', 'url('+ img + ')');
console.log(img);
});
});
Might help you out.
Related
It seems to be easy, but it might be harder than it looks like, maybe. I've been having a hard time with this one.
What I'm trying to accomplish here is to create dynamic content with IDs, when clicking on any button, input or link using jQuery.
To explain better,
If .button-2 or .input-2 or .link-2 has been clicked, then the content dynamically created should be Content-1 and not Content-2 (I've got this part working right).
Then, If .button-1 or .input-1 or .link-1 gets clicked after, another content gets dynamically created and should be Content-2 (and not Content-1) and so on... (this part is also working fine)
If there is only 3 different elements I'm targeting, then only 3 contents should be created and not more. Unless I add another different target element and so on... (I need help with this)
The target elements could (but is not necessary) be clicked as of an unorderly way and still have the content with an ordered ID. (This working fine too)
In other words, you don't have to click the target elements as of an orderly way to have the content with an ordered ID.
Jsfiddle example
This code was created as an example of the main code
$(function() {
var num = 1;
$("button").on("click", function() {
$("<div />").attr("id", num).text("Content-" + num)
.appendTo($(".inner"));
num++;
});
});
.inner {
margin-top: 50px;
padding: 50px;
border: 1px solid #CCC;
}
.inner div {
background: #d0cfcf;
padding: 10px;
margin-bottom: 10px;
font-size: 22px;
color: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<button type="button" class="button-1">btn 1</button>
<button type="button" class="button-2">btn 2</button>
<button type="button" class="button-3">btn 3</button>
</div>
<div class="container-2">
<input type="text" class="input-1" value="click me">
<input type="text" class="input-2" value="click on me too">
</div>
<div class="container-3">
Click here
Click here
</div>
<div class="inner"></div>
This question has been updated
Counting the buttons to answer the original question:
$(function() {
var num = 1;
$("button").on("click", function() {
if ($(".inner").children().length>=$(".container").children().length) return
$("<div />").attr("id", num).text("Content-" + num)
.appendTo($(".inner"));
num++;
});
});
.inner {
margin-top: 50px;
padding: 50px;
border: 1px solid #CCC;
}
.inner div {
background: #d0cfcf;
padding: 10px;
margin-bottom: 10px;
font-size: 22px;
color: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<button type="button">btn 1</button>
<button type="button">btn 2</button>
<button type="button">btn 3</button>
</div>
<div class="inner"></div>
Here's a hardcoded, simple example.
var num = 1;
$( "button" ).on( "click", function() {
if( num === 1) {
num++;
$( "<div />" ).attr( "id", num ).text( "Content-" + num ).appendTo( $( ".inner" ) );
return;
}
if( num === 2) {
num--;
$( "<div />" ).attr( "id", num ).text( "Content-" + num ).appendTo( $( ".inner" ) );
return;
}
if( num === 3) {
num--;
$( "<div />" ).attr( "id", num ).text( "Content-" + num ).appendTo( $( ".inner" ) );
return;
}
});
In my application I have added close button side bootstrap dropdown.
Clicking on that close button I have to close that dropdown.
This is working properly, but when I click anywhere outside dropdown, dropdown is not closing
Here is Fiddle : goo.gl/3RAkBw
Can any one tell me how can I close
You can try this:
$(document).on('click',function(){
$('#layers').hide();
})
$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
var $target = $( event.currentTarget );
$target.closest( '.btn-group' )
.find( '[data-bind="label"]' ).text( $target.text() )
.end()
.children( '.dropdown-toggle' ).dropdown( 'toggle' );
return false;
});
$(window).on('click', function () {
$( '#layers' ).css( 'display','none' );
});
.btn-input {
display: block;
}
.btn-input .btn.form-control {
text-align: left;
}
.btn-input .btn.form-control span:first-child {
left: 10px;
overflow: hidden;
position: absolute;
right: 25px;
}
.btn-input .btn.form-control .caret {
margin-top: -1px;
position: absolute;
right: 10px;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<br/><br/>
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button onclick="$('#layers').toggle();" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul id="layers" class="dropdown-menu" role="menu">
<span><img class="close_img dropdown-toggle" onclick="$('#layers').toggle();" data-toggle="dropdown" src="https://www.eonenergy.com/images/icons/close.gif" alt="CloseWindow" title="Close" style="margin-top:5px;margin-right:5px" /></span>
<li>Item 1</li>
<li>Another item</li>
<li>This is a longer item that will not fit properly</li>
</ul>
</div>
</div>
</div>
<br/><br/>
You can set click event on window like, (if you have to hide only on click of anywhere on window)
$(window).on('click', function () {
$( '#layers' ).css( 'display','none' ); //$( '#layers' ).hide();
});
Simply use the below jquery code
$(document).click( function () {
$("#layers").css("display", "");
});
or use
$(document).click( function () {
$("#layers").toggle();
});
"show" class is added when the dropdown is clicked so to hide the dropdown menu you have to remove it:
$(document).on('click',function(){
$('#user-menu').removeClass('show');
})
I am developing a Webview Application in Cordova. This webview App has iframe where I am showing the Content from my website. Layout of my webview app, Black portion is the iframe
<body style="background-color: #f8f8f8">
<div id="web_container">
<iframe id="main_content"
src="https://www.mycollegepicks.in/home"
style="margin: auto auto; overflow: hidden; border: 1px solid #f8f8f8"></iframe>
</div>
<div id='error' style='display: none'></div>
<div id="menu_wrapper" style="min-height: 40px">
<div>
<img class="menu_item_img" src="img/home.png"
style="width: 36px; padding: 2px;" id="home_btn">
</div>
<div>
<img class="menu_item_img" src="img/arrow_left.png"
style="width: 36px; padding: 2px;" id="back_btn">
</div>
<div>
<img class="menu_item_img" src="img/refresh.png"
style="width: 36px; padding: 2px;" id="reload_btn">
</div>
<div>
<img class="menu_item_img" src="img/arrow_right.png"
style="width: 36px; padding: 2px;" id="forward_btn">
</div>
<div>
<img class="menu_item_img" src="img/shut_down.png"
style="width: 36px; padding: 2px;" id="logout_btn">
</div>
</div>
</div>
I have written following JS -
$( "#logout_btn" ).click(function() {
showToast('Logging Out', 'info');
console.log("Logout Button Clicked");
logout_user();
});
$( "#reload_btn" ).click(function() {
showToast('Reloading Page', 'info');
console.log("Reload Button Clicked");
$( '#main_content' ).attr( 'src', function ( i, val ) { return val; });
});
$( "#home_btn" ).click(function() {
console.log("Home Button Clicked");
$( '#main_content' ).attr( 'src','https://www.mycollegepicks.in/home?app=1&tab_type=home');
});
$( "#back_btn" ).click(function() {
console.log("Back Button Clicked");
iFrameHistory = document.getElementById("main_content").contentWindow.history.length;
if(iFrameHistory)
document.getElementById('main_content').contentWindow.history.back();
writeLog("iFrameHistory "+iFrameHistory);
PopeyeLogger('Iframe History Length '+iFrameHistory,'info');
});
$( "#forward_btn" ).click(function() {
console.log("Forward Button Clicked");
iFrameHistory = document.getElementById("main_content").contentWindow.history.length;
if(iFrameHistory)
document.getElementById('main_content').contentWindow.history.forward();
writeLog("iFrameHistory "+iFrameHistory);
PopeyeLogger('Iframe History Length '+iFrameHistory,'info');
});
But clicking on the backbutton redirects to previous page instead of iframe page back.
Note : In iframe every page load and change made via ajax. On every ajax we push the url to browser state.
I had the same issue, the solution that worked for me is a simple trick. Replace the :
<a data-rel="back" data-icon="back">back</a>
by
<a data-id="persistent" href="the page_before" data-transition="slide" data-icon="back"> back</a>
It worked fine
Somehow the canvas drawing is getting blur when attached under tabs of jquery ui.
Can anybody help me to figure out why canvas drawing is getting blur?
problem seems to be in this section
.ui-tabs-panel {
height:500px; }
#chartCanvas-1,#crossCanvas-1{
position:absolute; top:50px; left:0px;
/*border:1px solid blue;
width:500px;
height:400px;*/
}
/*#crossCanvas-1{ border:1.5px solid green;}
#chartCanvas-1{ border:1px solid red;}*/
Using jquery 1.8.3
Using jquery ui and css
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Create dynamic Tabs using jQuery and css</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
var tabTitle = $( "#tab_title" ),
tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $( "#tabs" ).tabs();
// modal dialog init: custom buttons and a "close" callback reseting the form inside
var dialog = $( "#dialog" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function() {
addTab();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find( "form" ).submit(function( event ) {
addTab();
dialog.dialog( "close" );
event.preventDefault();
});
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
chartCanvas_id = "chartCanvas-" + tabCounter,
crossCanvas_id = "crossCanvas-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'><canvas id='"+chartCanvas_id+ "'></canvas><canvas id='"+crossCanvas_id+ "'></canvas></div>" );
tabs.tabs( "refresh" );
tabCounter++;
}
// addTab button: just opens the dialog
$( "#add_tab" )
.button()
.click(function() {
dialog.dialog( "open" );
});
// close icon: removing the tab on click
$( "#tabs span.ui-icon-close" ).live( "click", function() {
var panelId = $( this ).closest( "li" ).attr( "aria-controls" );
if( panelId !== "tabs-1")
{
panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
}
});
var canvas=document.getElementById("chartCanvas-1");
var context=canvas.getContext("2d");
var canvasOffset=$("#chartCanvas-1").offset();
/*var canvasTemp=document.getElementById("crossCanvas-1");
var ctxTemp=canvasTemp.getContext("2d");
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;*/
context.beginPath();
context.moveTo(10, 10);
context.lineTo(40,30);
context.stroke();
context.closePath();
/*ctxTemp.beginPath();
ctxTemp.moveTo(0, 0);
ctxTemp.lineTo(40,50);
ctxTemp.stroke();
ctxTemp.closePath(); */
});
</script>
<link rel="stylesheet" href="jquery-ui.css">
<style type="text/css">
#dialog label, #dialog input { display:block; }
#dialog label { margin-top: 0.5em; }
#dialog input, #dialog textarea { width: 95%; }
#tabs { margin-top: 0.7em; height: 600px;}
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; }
.ui-tabs-panel {
height:500px; }
#chartCanvas-1,#crossCanvas-1{
position:absolute; top:50px; left:0px;
/*border:1px solid blue;
width:500px;
height:400px;*/
}
/*#crossCanvas-1{ border:1.5px solid green;}
#chartCanvas-1{ border:1px solid red;}*/
</style>
</head>
<body>
<div id="dialog" title="Tab data">
<form>
<fieldset class="ui-helper-reset">
<label for="tab_title">Title</label>
<input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
<label for="tab_content">Content</label>
<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
</fieldset>
</form>
</div>
<button id="add_tab">Add Tab</button>
<div id="tabs">
<ul>
<li>Default <span class="ui-icon ui-icon-close">Remove Tab</span></li>
</ul>
<div id="tabs-1">
<canvas id="chartCanvas-1" style="width: 600px; height: 400px"></canvas>
<!-- <canvas id="crossCanvas-1" style="width: 600px; height: 400px"></canvas> -->
</div>
</div>
</body>
</html>
Regards,
SK
the reson it's blurred is becuase of your CSS for the canvas, in the canvas tag.
<canvas id="chartCanvas-1" style="width: 600px; height: 400px"></canvas>
The standard size for a canvas is 300x150 pixels and changing the width and height with CSS will scale the canvas. To change the size of the canvas, instead do it in the JavaSCript code
canvas.width = 600;
canvas.height = 400;
And remove the style from your canvas tag in your HTML code
<canvas id="chartCanvas-1"></canvas>
Simple question. I'm trying to target the 'i' tag with the panel-indicator class in the tree. Additionally I need to remove the 'hide' class from the panel-edit 'i' tag. Here's the HTML:
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<i class="panel-indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="panel-edit glyphicon glyphicon-pencil pull-right hide"></i>
<h4 class="panel-title" id="-collapsible-group-item-#1-">
<a data-toggle="collapse" data-parent="#collapseOne" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">System Details</a>
<a class="anchorjs-link" href="#-collapsible-group-item-#1-"><span class="anchorjs-icon"></span></a>
</h4>
</div>
</div>
Here's the script code. Though it works, it seems like a sloppy way to get it to work. So I'm just wanting to know how to write it correctly so that it sets the 'rotate' class to the 'i' tag with the panel-indicator class.
$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
$(this).addClass("open");
$(this).parent().prev('i.panel-indicator').addClass('rotate');
} else if (
$(this).hasClass("open")) {
$(this).removeClass('open');
$(this).parent().prev().prev('i.panel-indicator').removeClass('rotate');
}
});
Try '.closest' instead:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>closest demo</title>
<style>
li {
margin: 3px;
padding: 3px;
background: #EEEEEE;
}
li.hilight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
$( document ).on( "click", function( event ) {
$( event.target ).closest( "li" ).toggleClass( "hilight" );
});
</script>
</body>
</html>
source: https://api.jquery.com/closest/
Edit: in your case:
$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
$(this).addClass("open");
$(this).closest('i.panel-indicator').addClass('rotate'); //edited line
} else if (
$(this).hasClass("open")) {
$(this).removeClass('open');
$(this).closest('i.panel-indicator').removeClass('rotate'); // edited line
}
});
$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
$(this).addClass("open");
$(this).closest('.panel-heading').find('i.panel-indicator').addClass('rotate');
$(this).closest('.panel-heading').find('i.panel-edit').removeClass('hide');
} else if (
$(this).hasClass("open")) {
$(this).removeClass('open');
$(this).closest('.panel-heading').find('i.panel-indicator').removeClass('rotate');
$(this).closest('.panel-heading').find('i.panel-edit').addClass('hide');
}
});