I've been programming for a few months and making little scripts here and there for a site which has API and jQuery. Lately I have been working on a mini-rpg game for that site; unfortunately I am not exactly the most experienced person.
I encountered some problems with some .bind("click") jQuery events, mainly one in peculiar that won't stop and endlessly repeats. I made some buttons that should trigger more functions on click. I have a feeling I might be endlessly repeating between 2 functions, as some console.log messages are neverendingly repeating, crashing the tab in which I'm testing the code. I couldn't find what was the cause of the loop.
//#initialFunctions
settingsButton();
menuButton();
//#buttons
function btnCloser(){
if($('#btn1').length!==0){
$('#btn1').remove();
console.log("Btn1 removed.");
}
if($('#btn2').length!==0){
$('#btn2').remove();
console.log("Btn2 removed.");
}
if($('#btn3').length!==0){
$('#btn3').remove();
console.log("Btn3 removed.");
}
}
function buttons3(){
$('#mainWindow').append('<button id="btn1" type="button" style="position:absolute; top:105px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
$('#mainWindow').append('<button id="btn2" type="button" style="position:absolute; top:135px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
$('#mainWindow').append('<button id="btn3" type="button" style="position:absolute; top:165px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
$('#btn1').hover(function(){$('#btn1').css("cursor","pointer");$('#btn1').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn1').css("cursor","auto");$('#btn1').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
$('#btn2').hover(function(){$('#btn2').css("cursor","pointer");$('#btn2').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn2').css("cursor","auto");$('#btn2').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
$('#btn3').hover(function(){$('#btn3').css("cursor","pointer");$('#btn3').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn3').css("cursor","auto");$('#btn3').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}
//#buttonsUI
function menuButton(){
$('body').append('<button id="menuBtn" type="button" onclick="menu()" style="position:absolute; top:55px; right:500px; width:100px; height:20px; background-color:black; color:white; opacity: 0.8; border-radius:20px; opacity: 0.8; z-index:100; font-size=200%; color:white; text-align:center;">Menu</button>');
$('#menuBtn').hover(function(){$('#menuBtn').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#menuBtn').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}
//#menu
maintenanceMode=false;
function menu(){
$('statWindow').remove();
if($('#mainWindow').length===0){
$('body').append('<div id="mainWindow" style="position:absolute; top:90px; right: 355px; height: 200px; width: 250px; background-color: black; border: 2.5px solid #2FC7FB; border-radius: 20px; opacity: .8; z-index: 100;"></div>');
$('#mainWindow').append('<div id="mainWindowText" style="position:absolute; top:12px; left:3px; text-align:left;"></div>');
$('body').append('<div id="closeButton" onclick="mainWindowClose()" style="position: absolute; top:96px; right:360px; height:20px; width:20px; background-color:black; color:white; opacity: 0.8; opacity:0.8; z-index:101; font-size=170%; text-align:center; border: 2.5px solid #2FC7FB; border-radius: 10px;">X</div>');
$('#closeButton').hover(function(){$('#closeButton').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#closeButton').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}
btnCloser();
buttons3();
$('#btn1').bind("click",console.log("Stats button clicked.")).text('Stats');
$('#btn2').bind("click",clinic()).text('Clinic');
$('#btn3').bind("click",mainWindowClose()).text('Close');
}
//#mainUI
notShown=true;
function newWindow(){
$('#miniGame').remove();
notShown=false;
$('body').append('<div id="mainWindow" style="position:absolute; top:90px; right: 355px; height: 200px; width: 250px; background-color: black; border: 2.5px solid #2FC7FB; border-radius: 20px; opacity: .8; z-index: 100;"></div>');
$('#mainWindow').append('<div id="mainWindowText" style="position:absolute; top:12px; left:3px; text-align:left;"></div>');
$('body').append('<div id="closeButton" onclick="mainWindowClose()" style="position: absolute; top:96px; right:360px; height:20px; width:20px; background-color:black; color:white; opacity: 0.8; opacity:0.8; z-index:101; font-size=200%; text-align:center; border: 2.5px solid #2FC7FB; border-radius: 10px;">x</div>');
$('#closeButton').hover(function(){$('#closeButton').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#closeButton').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
//$('#mainWindow').append('<button id="battleButton" type="button" onclick="clinicText()" style="position:absolute; top:160px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;">Battle!</button>');
}
function showAlert(){
$('body').append('<div id="miniGame" onclick="newWindow()" style="position:absolute; top:55px; right: 350px; height: 20px; width: 20px; background-color: red; border-radius:20px; opacity: 0.8; z-index: 100; font-size=500%; color: solid red; text-align: center;">!</div>');
$('#miniGame').hover(function(){$('#miniGame').css("cursor","pointer");$('#miniGame').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#miniGame').css("cursor","auto");$('#miniGame').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
notShown=false;
$('#miniGame').bind("click",monsterEncounter());
}
function mainWindowClose(){
btnCloser();
$('#mainWindow').remove();
$('#closeButton').remove();
notShown=true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
It seems my code is somehow repeating over and over again and I wondered what were the causes. Thanks!
When binding to an event, you need to provide a function that will be executed when the event occurs.. you appear to be passing the result of calling a function.
For example:
$('#btn1').bind("click",console.log("Stats button clicked."))
Is actually the same as
var x = console.log("Stats button clicked.");
$('#btn1').on('click', x);
which probably isn't what you intended.
Try this:
$('#btn1').on('click', function () {
console.log('Stats button clicked.');
});
It is likely your .hover( handlers that are endlessly repeating tho.
Also, try breaking your code down and indenting it.. it's nice to see it all on one line, but it makes it hard to follow. For example, in your hover function you have invalid javascript (which will likely be throwing errors in your console)
Related
I want to use custom range bar in Jquery.panzoom.js in image zoom function, but i can' t customize input range slider in html, so i use Jquery ui plugin for custom range slider, but i cant use it on panzoom plugin, please find my below code and help me fix this, where im wrong,
HTML
<!doctype html>
<html>
<head>
<title>Panzoom for jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.panzoom.js"></script>
<script src="jquery.mousewheel.js"></script>
</head>
<body>
<section id="auto-contain">
<div class="panzoom-parent">
<img class="panzoom" src="758024315509.png" width="800" height="350">
</div>
<div class="buttons">
<button class="zoom-in" style="visibility:hidden">Zoom In</button>
<button class="zoom-out" style="visibility:hidden">Zoom Out</button>
<input type="range" class="zoom-range" style="visibility:hidden">
<button class="reset" style="visibility:hidden">Reset</button>
<input type="hidden" id="InValueUI" value="0"/>
</div>
<button id="btnInc">+</button>
<button id="btnDec">-</button>
<button id="btnReset">Reset</button>
<div id="slider"></div>
</section>
</body>
</html>
Css
body { background: #F5FCFF; color: #333666; }
section { text-align: center; margin: 50px 0; }
.panzoom-parent { border: 2px solid #333; }
.panzoom-parent .panzoom { border: 2px dashed #666; }
.buttons { margin: 40px 0 0; }
.ui-widget-content.ui-widget {
border: 1px solid #cbcbcb;
}
.ui-slider-vertical {
width: 5px;
height: 150px;
}
.ui-widget-header {
border: 1px solid #dddddd;
background: #000;
color: #333333;
font-weight: bold;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 15px;
height: 15px;
cursor: default;
-ms-touch-action: none;
touch-action: none;
}
.ui-slider .ui-slider-handle:focus {
background: #cbcbcb;
outline: none;
border: 1px solid #cbcbcb
}
.ui-slider-vertical .ui-slider-handle {
left: -0.359em;
margin-left: 0px;
margin-bottom: -0.6em;
border-radius: 50%;
}
.ui-widget.ui-widget-content {
border: 1px solid #cbcbcb;
background: #ebebeb;
}
.ui-menu .ui-menu-item {
margin: 5px 0px 0px 0px;
cursor: pointer;
list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
padding: 8px 5px;
border-bottom-color: #cbcbcb;
border-bottom-style: solid;
border-bottom-width: 0px;
font-size: 13px;
background-color: #ebebeb;
-webkit-box-shadow: 0px 18px 0px -17px rgba(204, 204, 204, 1);
-moz-box-shadow: 0px 18px 0px -17px rgba(204, 204, 204, 1);
box-shadow: 0px 18px 0px -17px rgba(204, 204, 204, 1);
}
.ui-menu .ui-menu-item:last-child {
border-bottom-width: 0px;
-webkit-box-shadow: 0px 0px 0px 0px rgba(204, 204, 204, 1);
-moz-box-shadow: 0px 0px 0px 0px rgba(204, 204, 204, 1);
box-shadow: 0px 0px 0px 0px rgba(204, 204, 204, 1);
}
.ui-menu .ui-menu-item:hover {
background-color: #64a2bb;
color: #fff;
font-size: 13px;
}
.ui-menu .ui-menu-item:hover .ui-state-active {
color: #fff
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-state-active.ui-button:hover {
border: 0px solid #003eff;
background: transparent;
font-weight: normal;
color: #000;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
border: 1px solid #cccccc;
background: #fff;
font-weight: normal;
color: #2b2b2b;
outline: none;
}
Javascript
<script>
$('#btnInc').click(function(){
$('.zoom-in').click();
});
$('#btnDec').click(function(){
$('.zoom-out').click();
});
$('#btnReset').click(function(){
$('.reset').click();
});
$(document).ready(function() {
var a = 0;
$("#slider").slider({
value: a,
orientation: "vertical",
range: "min",
animate: true,
change: function(event, ui) {
// $('#ere').text(ui.value);
var ab = $('#InValueUI').val();
// alert(ui.value);
// alert(ab);
var _avalue= Math.ceil(ui.value / 16.66666666666667);
/*
$("#slider").slider({
value: _avalue*16.66666666666667,
}); */
//alert(_avalue);
if(_avalue > ab){
$('.zoom-in').click();
}
else if(_avalue < ab){
$('.zoom-out').click();
}
$('#InValueUI').val(_avalue);
// alert(ui.value);
//debugger;
/*var $section = $('#auto-contain');
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
startTransform: 'scale(2)',
increment: 0.5,
minScale: 1,
contain: 'automatic'
}).panzoom('zoom');
*/
}
});
// alert(ui.value);
//Jquery Pan Zoom
var $section = $('#auto-contain');
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
startTransform: 'scale(1)',
increment: 0.5,
minScale: 1,
contain: 'automatic'
}).panzoom('zoom');
});
</script>
Plugin Used : Jquery, Jquery ui, Jquery.PanZoom.js
i will do something with this code, but i need more clear on this,
1. when click zoom in (+) button the range slider wants to increase,
2.if press reset button the slider goes to 0 position,
3. need to sync both sliders and control buttons
please help me to fix all this,
Please find below image what im done,
I try to put tooltips on an element, that changes based on four buttons on the same page.
a.tooltip span {
z-index:15;
position: relative;
display:none;
padding:14px 20px;
margin-top:17.5%;
margin-left:18%;
width:300px;
height:80px;
line-height:16px;
border-radius:2px;
box-shadow: 0px 0px 6px 3px #666;
opacity: 0.8;
}
a.tooltip:hover span{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;
}
This is my tooltip. I works just fine, but I can't hide it, when I want another tooltip to be displayed.
How do I disable this tooltip and show another one, based on the buttons I clicked? Tooltip1 has to be hidden when Tooltip2 is shown and vice versa.
Dr. Google didn't help.
Image for clarification :
You can change tooltip content with
$(".tooltip-selector").tooltip("option", "content", "New Content");
and bind this to your button's click
enter code here
$(document).ready(function(){
$('.btn1').click(function(){
$('.tooltip').addClass('btn1');
$('.tooltip').removeClass('btn2');
});
$('.btn2').click(function(){
$('.tooltip').addClass('btn2');
$('.tooltip').removeClass('btn1');
});
});
a.tooltip span {
z-index:15;
position: relative;
display:none;
padding:14px 20px;
margin-top:17.5%;
margin-left:18%;
width:300px;
height:80px;
line-height:16px;
border-radius:2px;
box-shadow: 0px 0px 6px 3px #666;
opacity: 0.8;}
a.tooltip.btn1:hover span.btn1{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;}
a.tooltip.btn2:hover span.btn2{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" class="tooltip">1
<span class="btn1">1</span>
<span class="btn2">2</span>
</a>
<button class="btn1">1</button>
<button class="btn2">2</button>
I've created a script in which every data fetched from mysql database has maximum 4 Image's name and path. Problem is to view those Images user must click on preview link which shows a <div id='previewdivofimage'> as per the product Id link clicked and blur rest background. That div
should fetch name and path of the images from mysql database and display in that div but when I click on preview link it just display the last added product images and not the particular id linked which was clicked because to fetch mysql data of that particular product I need to go back and call php functions via jquery or ajax. I am not able to understand how can I fetch the product id and its image's name & path of that particular product Id from that div now, because page should not reload again for doing this activity. Since I am not familiar with Ajax have no clue how does it work. This is JSFIDDLE
Jquery script for making div appear
<script>
myBlurFunction = function(state) {
var containerElement = document.getElementById('".$row['product_id']."');
var overlayEle = document.getElementById('previewdivofimage');
if (state) {
overlayEle.style.display = 'block';
} else {
overlayEle.style.display = 'none';
containerElement.setAttribute('class', null);
}
};
</script>
CSS Code
#previewdivofimage
{
position: fixed;
display: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.50);
z-index: 999;
}
#popup
{
position: absolute;
width: 630px;
height: 430px;
background: rgba(0, 0, 0, 0.40);
border: none;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
#popupwindow
{
position: absolute;
width: 600px;
height: 400px;
background: rgb(255,255,255);
border: none;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
#closeblury
{
border:2px solid transparent;
cursor:pointer;
float:right;
width:20px;
height:20px;
text-align:center;
font-weight:bold;
color:black;
text-shadow: 0px 1px 1px #4d4d4d;
}
#nothing
{
border:1px solid transparent;
margin-left:15px;
width:100%;
height:20px;
}
#showcaseboxcontainer
{
height:91%;
margin-left:15px;
margin-right:15px;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.75);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
#productimg
{
border:1px solid black;
margin-left:5px;
width:150px;
}
#fimg
{
height:100%;
width:100%;
}
Link code
<a style='cursor:pointer;' onClick='myBlurFunction(1);myFunction(".$row['product_id'].")' id='".$row['product_id']."'>
Preview
</a>
Div Code
<div id='previewdivofimage'>
<div id='popup'>
<div id='popupwindow'>
<div id='closeblury' onclick='javascript:myBlurFunction(0);'>
X
</div>
<div id='nothing'>
</div>
<div id='showcaseboxcontainer'>
<div id='productimg'>
<img id='fimg' src='".$row['product_image_name_first']."'>
</div>
</div>
</div>
</div>
</div>
#popup_box2 {
_position:absolute; /* hack for internet explorer 6 */
height:350px;
width:600px;
background:#FFFFFF;
left: 33%;/*300px; */
right:30%;
text-align:left;
top: 150px;
z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 0; /* additional features, can be omitted */
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 15px #ff0000;
-webkit-box-shadow: 0 0 15px #ff0000;
box-shadow: 0 0 15px lightblue;
background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/
filter:alpha(opacity=50); opacity:0.5;
}
After clicking on a particular div the transparency effect should be removed and the text clearly visible.
Live example here >>
Hello Friends :)
this can easily be achieved by a single line of code via jquery library :
html
<div id="popup_box2" class="opacityfilter"><button class="clickme">Click me to add and remove effect</button> </div>
by using toggleClass method !
jquery
$('.clickme').click(function(){
$('#popup_box2').toggleClass('opacityfilter');
});
Css
.opacityfilter {
_position:absolute; /* hack for internet explorer 6 */
height:350px;
width:600px;
background:#FFFFFF;
left: 33%;/*300px; */
right:30%;
text-align:left;
top: 150px;
z-index:100;
margin-left: 0;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 15px #ff0000;
-webkit-box-shadow: 0 0 15px #ff0000;
box-shadow: 0 0 15px lightblue;
background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/
filter:alpha(opacity=50); opacity:0.5;
}
One way to do this would be to remove and add a class...
#popup_box2 {
_position:absolute; /* hack for internet explorer 6 */
height:350px;
width:600px;
background:#FFFFFF;
left: 33%;/*300px; */
right:30%;
text-align:left;
top: 150px;
z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 0; /* additional features, can be omitted */
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 15px #ff0000;
-webkit-box-shadow: 0 0 15px #ff0000;
box-shadow: 0 0 15px lightblue;
background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/
}
#popup_box2.filter {
filter:alpha(opacity=50); opacity:0.5;
/*Or whatever css items that you want toggled*/
}
Add Filter
$('ELEMENTselectorHERE').click(function(){
$('#popup_box2').addClass('filter');
});
Remove Filter
$('ELEMENTselectorHERE').click(function(){
$('#popup_box2').removeClass('filter');
});
I am having the below code for display custom scrollbar. Here some background is showing, instead of this I need display a 1px thin line image.. How can I do this? I am using the TinyScroller
Css:
#wrapper_1 {width:99%; height:600px; padding:2px}
#scroll_1 {position:relative; width:99%; height:600px; overflow:auto}
#scrollcontent_1 {position:absolute; width:94%; z-index:200}
#scrollbar_1 {float:right; position:relative; border:0; display:none; width:15px; height:600px; z-index:100; background:url(images/scroll-bg.png)}
.scroller_1 {position:relative; top:0; cursor:pointer; border:0; width:15px; background-image:url(images/scroller.png); background-position:50% 50%; background-repeat:no-repeat}
.buttonclick_1 {}
Code:
<div id="wrapper_1">
<div id="scroll_1">
<div id="scrollcontent_1">
<h1>TinyScroller</h1>
<p>test message</p>
</div>
<div id="scrollbar_1">
<div id="scroller_1" class="scroller_1"></div>
</div>
</div>
</div>
<script type="text/javascript">
TINY.scroller.init('scroll_1','scrollcontent_1','scrollbar_1','scroller_1','buttonclick_1');
</script>
Well if you are in Chrome you can use plain ol' CSS:
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 4px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
background-clip: padding-box;
border: solid transparent;
border-width: 1px 1px 1px 6px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-button {
display: none;
}
Demo: http://jsfiddle.net/maniator/ysgBy/
Site to check out: http://css-tricks.com/custom-scrollbars-in-webkit/
According to the doc
http://www.scriptiny.com/2009/09/javascript-scrollable-div/
I think your html is not correct. Try something like :
<div id="wrapper_1">
<div id="scroll_1">
<div id="scrollcontent_1">
<h1>TinyScroller</h1>
<p>test message</p>
</div>
<div id="scrollbar_1">
<div id="scroller"></div>
</div>
</div>