This code is basic one which changes the background to black one.
PHP CODE
if ($res160[0] == "1") {
echo "<script>$('body').css('background-color', 'black'); $('body').css('color', 'white');</script>";
}
How do I write a code to reduce the brightness?
There is a CSS property filter which is used to reduce the brightness.
filter: brightness(50%);
Hope this is what you are looking for.
I would do this by changing the brightness of the container(body or div) something like this.
var x = $("#myRange");
$("body").css({
"opacity": x.val()
});
x.on("change mousemove", function() {
$("#contents").css({
"filter": "brightness(" + $(this).val() * 100 + "%)"
});
});
div {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Choose Light Level<br>
<input id='myRange' type="range" min="0.3" max="1" step="0.1" value=1><br> dark -> light
<div id="contents">
<div style="">
<img src="http://lorempixel.com/100/100/nightlife/Dummy-Text">
<img src="http://lorempixel.com/100/100/food/Dummy-Text">
</div>
<div style="background-color: red;">
<img src="http://lorempixel.com/100/100/nightlife/Dummy-Text">
<img src="http://lorempixel.com/100/100/food/Dummy-Text">
</div>
</div>
I have a page which has 4 jquery UI tabs. The first tab just displays a message saying "HELLO". The 2nd, 3rd and 4th tabs have some html and php scripts running. All the pages are getting displayed properly. But say for example I am executing the php script on the 3rd tab by submitting a button. It does get executed but when the page reloads, I see the first tab flicker for a second and then the 3rd tab gets displayed. Same is the case for all the tabs. The first tab always gets displayed for a seconds and then it goes. Could you please let me know to add some code so that the 1st tab (or the div in which it is written ) is bypassed when other tab executes some php script.
My Javascript is as follows :
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function()
{
$("#menu ul li a").click(function(e) {
e.preventDefault();
$("#menu ul li a").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
$("#menu").tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
});
My HTML code is as follows :
<div id="menu">
<ul>
<li><a href="#tab-1" onClick="window.location.href='#tab-1';return false;" >Welcome</a></li>
<li>Activation Response Generator </li>
<li>Decode Support Key</li>
<li>Decode Recovery Key</li>
</ul>
<div id="tab-1" >
<div id ="main">
<div align=center>
<table style="padding-top:20px;"> <tr>
<td style="padding-left:20px;"> <img src="Aruba_Networks_newLogo.png " /> </td>
<br/>
</div>
<?php session_start();$user = $_SESSION['usr'];?>
</br>
<tr>
<td> <font size ="6"> <b> <u> Welcome <?php echo $user; ?></u> </b> </font> </td>
</br>
</br>
<td> <font size ="6"> <b> <u> HAVE A GREAT DAY </u> </b> </font> </td>
</br>
</br>
<td> <font size ="6"> <b> Logout </b> </font></td>
</tr>
</div>
</div>
<div id="tab-2">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
<div id="tab-3">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
<div id="tab-4">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
</div>
Create a overlay div. Put this inside the body for the whole page, or inside a div with position: relative.
CodePen
.overlay {
position: fixed; /* or absolute if inside a div */
width: 100%; height: 100%;
background: white;
}
At some point, hide that div to show the underlying content. This would likely be in a document ready handler, or after an AJAX call.
$(document).ready(function(){ $('.overlay').fadeOut(); });
You can also spice it up, and put a loading message inside the overlay.
<div class="overlay">
<h1>Loading</h1>
</div>
.overlay h1 {
position: absolute;
top: 45%; /* nearly the center, good enough for a second of visibility */
text-align: center;
width: 100%;
}
When I like the page from my site, the link is from index...I need that this link be the link of the correct page...I'm trying to take the url address( have the index of my site..then I click in a image..and open another link with infos from my photo. There has a like button and when I click , this like the link of the first page of my site , don't the current page)
I'm trying to follow this tutorial: http://support.addthis.com/customer/portal/articles/381249-adding-parameters-to-urls#.UW1-Kit8KPV
here is the code that I have tried:
<style type="text/css">
.float-all {
float: left;
width: 82px;
height: 30px;
overflow: hidden;
margin: 2px;
padding: 4px 2px;
}
.post-btn-share {
width: 100%;
overflow: auto;
}
</style>
<!-- AddThis Button BEGIN -->
<div class="post-btn-share">
<div class="addthis_toolbox addthis_default_style">
<div class="float-all">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
</div>
<div class="float-all">
<a class="addthis_button_tweet"></a>
</div>
<div class="float-all">
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
</div>
</div>
<script type="text/javascript">
var addthis_share = {
url_transforms : {
add: {
img: '<?php echo $_GET['img']; ?>',
user: '<?php echo $_GET['user']; ?>'
}
}
}
</script>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-51473a5c09315ac4"></script>
<!-- AddThis Button END -->
Going through the AddThis support site I found this article regarding URL & Title:
http://support.addthis.com/customer/portal/articles/381242-url-title#.UW26obVg8y4.
Note: Some services, most notably Facebook and LinkedIn, do not use
parameters we send to them. Rather, they use meta tags to determine
the URL, title, and description to share. See this blog post for more
information. See this blog post for more information.
I am using galleria slider as a jquery slider nd jwplayer to display videos. Problem is that it does not display the jwplayer in the slider, it just displays a black square. I got it working for images but can't get it working for the video player jwplayer. Can somebody who knows how to do this modify the code below so it is working in my app?
Galleria: http://galleria.io/docs/
jwplayer: http://www.longtailvideo.com/jw-player/
<?php if(count($arrVideoFile[$key]) > 1){ ?>
<style>
#galleriavideo_<?php echo $key; ?>{ width: 500px; height: 300px; background: #000 }
</style>
<div id="galleriavideo_<?php echo $key; ?>">
<?php foreach ($arrVideoFile[$key] as $v) { ?>
<div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...
<script type="text/javascript">
jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>",
width: 480,
height: 270
});
<?php $i++; ?>
</script>
</div>
<?php } ?>
</div>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriavideo_<?php echo $key; ?>');
</script>
<?php } ?>
It is a bit strange, another user posted an extremely similar question here: Having trouble using iframes
Anyway, I will try to post a solution close to your code. I presume you want one slider with multiple videos.
You need two files: video.php, a page showing a video according to a certain filename and gallery.php, the page containing the slider.
video.php:
<?php
$v = filter_input(INPUT_GET, "v", FILTER_SANITIZE_STRING);
?>
<div id="container"></div>
<script type="text/javascript" src="/path/to/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("container").setup({
file: "VideoFiles/<?php echo $v; ?>",
width: 480,
height: 270
});
</script>
gallery.php:
<?php if(count($arrVideoFile[$key]) > 1){ ?>
<div id="galleriavideo" style="width:500px; height:300px; background:#000;">
<?php
foreach($arrVideoFile[$key] as $v) {
$vurl = "/path/to/video.php?v=".rawurlencode($v);?>
<img class="iframe">
<?php } ?>
</div>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/galleria.js"></script>
<script type="text/javascript">
Galleria.loadTheme('/path/to/galleria.classic.min.js');
Galleria.run('#galleriavideo');
</script>
<?php } ?>
I am building a jQuery dialog with tabs in a PHP script. The script uses the 'include' directive inside of a loop, iterating over the tabs and including the other scripts. Each of the included files has the data for the tab and a <script> tag with a jQuery document.ready() function in it. Without the loop, it essentially does this:
<div id="tabDialog">
<div id="tabs">
<ul>
<li><a href="#tab1'>Tab1</a></li>
<li><a href="#tab2'>Tab2</a></li>
</ul>
<div id="tabContainer">
<div id="tab1">
<?php include "tab1.php"; ?>
</div>
<div id="tab2">
<?php include "tab2.php"; ?>
</div>
</div>
</div>
</div>
and, for example, tab1.php might have something like:
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
});
</script>
The problem is, upon creating and opening the dialog using the <div id="dialog"> as the dialog's DIV, the document's ready function is called a second time. Here is the dialog code:
$("#tabDialog").dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
}).dialog ('open');
What is the cause of this and what would be the best way to remedy the situation? I'm trying to keep each tab's functionality in separate files because they can be used in multiple situations and I don't have to replicate the code associated to them.
Thanks for any help or advice.
I believe I've found the reason and created a reasonably good fix. When jQuery creates the dialog, it moves the DIV that contains the contents of the dialog around in the DOM (to the very end of the document) and surrounds that div with the necessary scaffolding that a dialog requires (probably by using the .append() function or something similar). Because the DIV which was being dynamically had Javascript contained within it, jQuery was calling the document.ready() function after the DIV was relocated in the DOM (i.e. a second time). Therefore, prior to building the dialog, I .remove() every script tag within the dialog's DIV like this:
$("#tabDialog").find ("script").remove ();
$("#tabDialog").dialog ({
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
});
Doing this removes the SCRIPT tag from the DIV which it was originally loaded in, but the SCRIPT itself still exists. I'm still researching this because I don't completely understand where the Javascript code that was dynamically loaded actually "lives," but I suspect it's located somewhere outside of the DOM. I verified this in Chrome, Firefox, and Exploder 8.
I verified that any scripts that were originally contained within the loaded DIVs still function as expected by putting a button in the DIV and assigning a .click() function. Here is a small test that demonstrates this:
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dialogContents" style="display: none;">
<div style="border: 1px solid black; height: 98%;">
<form id="testForm">
<input type="text">
</form>
<button id="testButton">Test</button>
<script type="text/javascript">
$(document).ready (function () {
alert ("ready");
$("#testButton").click (function () {
alert ('click');
});
});
</script>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready (function () {
//
// Remove all the scripts from any place in the dialog contents. If we
// do not remove the SCRIPT tags, the .ready functions are called a
// second time. Removing this next line of Javascript demonstrates this.
//
$("#dialogContents").find ("script").remove ();
$("#dialogContents").dialog ({
width: 300,
height: 300,
title: 'Testing...'
});
});
</script>
</html>
I appreciate the help people provided in this thread!
I haven't used .dialog() too much, but do you need to use jQuery's ready() method in your script?
Looks like .dialog() has callback options you could take advantage of.
Script in tab:
<script type="text/javascript">
function onOpen() { alert('tab1 loaded') };
</script>
dialog:
$(this).dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
open: function(event, ui) { onOpen(); } // call function in script
}).dialog ('open');
So I have to say that I am not 100% sure why it is happening even though I understand that the dialog does maintin it's own state so this might be one of the reasons. But I could be way off. But the way to get around it is to use something like this instead:
$(document).one('ready', function () {
alert ('tab1 loaded');
});
This will make sure that it only runs once when the page loads.
I also had this problem, but the cause in my case was something different. I had a self-closing div element inside of the div that was used as the dialog holder. When I replaced the self-closing element with a closing tag, the document ready function stopped firing twice and only fired once, as expected.
For example, this caused the document ready function to fire twice:
$("#foo").dialog({
// ...
});
...
<div id="foo" title="My Dialog">
<div id="bar" />
</div>
Whereas this only fired the document ready function once:
$("#foo").dialog({
// ...
});
...
<div id="foo" title="My Dialog">
<div id="bar"></div>
</div>
You probably don't need the .dialog('open') call; use the option autoOpen : true instead.
Here's the resulting text of the page. I did a view-source and then removed any extraneous stuff from the page to try and make it simpler.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="tabDialog" style="position: relative; display: none;" title="Test Dialog">
<div id="tabs" style="position: absolute; top: 5px; bottom: 40px; left: 3px; right: 3px;">
<ul>
<li><a href='#tab1'>Tab #1</a></li><li><a href='#tab2'>Tab #2</a></li>
</ul>
<div class="tab_container" style="position: absolute; top: 35px; bottom: 0px; left: 1px; right: 1px; overflow: auto;">
<div id='tab1' class='tabPage ui-dialog-content'>
<form id="tab1Form">
More testing... <input class="keypressMonitor" type="text">
</form>
Testing...<br/>
Testing...<br/>
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
$("#tab1Form").bind ('save', function () {
alert ("in tab1Form.save ()");
});
});
</script>
</div>
<div id='tab2' class='tabPage ui-dialog-content'>
<form id="tab2Form">
<div style="position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px;">
Testing: <input class="keypressMonitor" type="text">
<textarea id="testArea" class="keypressMonitor tinymce" style="position: absolute; top: 30px; bottom: 2px; left: 2px; right: 2px;"></textarea>
</div>
</form>
<script type="text/javascript">
$(document).ready (function () {
$("#tab2Form").bind ('save', function () {
alert ("in tab2Form.save ()");
});
});
</script>
</div>
</div>
</div>
<div id="dialogButtons" style="position: absolute; bottom: 3px; left: 3px; right: 15px; text-align: right; height: 32px;">
<button class="applyButton" disabled>Apply</button>
<button class="okButton" disabled>Ok</button>
<button class="cancelButton">Cancel</button>
</div>
</div>
<script type="text/javascript">
$(document).ready (function () {
$("#tabs").tabs ();
$("button").button ();
/**
* Pressing the cancel button simply closes the dialog.
*/
$(".cancelButton").click (function () {
$("#tabDialog").dialog ("close");
});
$("#tabDialog").dialog ({
open: function () {
},
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
height: 'auto'
});
});
</script>
</body>
</html>
Puts your script into create method:
$.dialog({
<your parameters>
create: function() {
<your script>
}
}
With this method your script is called once only you create the dialog, not twice!