I am trying to change the color of "well" on mouseover but unable to do it. I have been trying with the following codes:
<script type="text/javascript">
function ChangeColor(well, highLight)
{
if (highLight)
{
well.style.backgroundColor = '#dcfac9';
}
}
</script>
PHP:
echo " <div class=\"well\" onmouseover=\"ChangeColor(this, true);\"\n";
echo " onmouseout=\"ChangeColor(this, false);\"> \n";
echo "something";
echo " </div>\n";
The above code is changing color nicely on mouseover but it is crossing the area of the "well". Please help to fix it.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="well">
<p>
This is a well content
</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(".well").mouseenter(
function(){
$(this).css('background-color','red');
});
$(".well").mouseleave(
function(){
$(this).css('background-color','#f5f5f5');
});
</script>
Doing this through JavaScript seems like overkill. This can easily be done simply through the use of CSS:
.well:default
{
background-color: #ccc;
}
.well:hover
{
background-color: #000;
}
var getDefaultBg = $(".well").css("background");
$(".well").mouseover(function() {
$(this).css("background", "#000");
}). mouseout(function() {
$(this).css("background", getDefaultBg);
});
simply use this for your requirement.
That was the script I wanted:
<script>
$(document).ready(function(){
$(".well").mouseenter(function(){
$(this).css("background-color", "#efefef");
});
$(".well").mouseleave(function(){
$(this).css("background-color", "#f5f5f5");
});
});
</script>
Related
I use this code to revieve some data from my database. The database has one column, that are numbers from 0 - 40. I get my return numbers from the database in a DIV tag. I would like to sort the numbers, so
1 - 20 is going on the left side of the div tag
21 - 40 is going on the right side of the div tag
0 is going in the middle of the div tag
I am thinking if it is possible to put a padding on some specifik numbers, or which way is the smartest to do it?
EDITED...
Thanks for the answers guys. The code is quite amateur, but I am not so good at it yet. But the return of the database is ok, except there is comming a 0 everytime. In the left handside where the numbers in the div are, that is where I want to padding some specifik numbers.
I hope that clearlifies my question a little bit?
Best Regards
Julie
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/my_script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css\placing.css">
<title>Numbers</title>
</head>
<body>
<div class="topbar">
<p>Topbar</p>
</div>
<div class="talraekke" id="show">
<p>Tal</p>
</div>
<div class="content">
<p>Enter The Number</p>
<form id="myForm" action="select.php" method="post">
<input type="number" name="numbervalue">
<button id="sub">Save</button>
</form>
<span id="result"></span>
</div>
<div class="talraekke">
<p>test</p>
</div>
<div class="talraekke">
<p>test</p>
</div>
</body>
</html>
JS:
// Insert function for number
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
}
$(document).ready(function(){
$("#sub").click( function(e) {
e.preventDefault(); // remove default action(submitting the form)
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
})
// Recieve data from database
$(document).ready(function() {
setInterval(function () {
$('#show').load('response.php')
}, 3000);
});
PHP Response from DB
// Return data from database
$result = $conn->query("SELECT numbers FROM numbertable");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo $row['numbers'] . '<br>';
}
As I understood you should use this simple way:
<?php
for($i=0; $i<=40; $i++)
{
echo '<div class="test">'.$i.'</div></br>';
}
?>
<style type="text/css">
.test{
background-color:#284062;
text-align:center;
color:#fff;
min-width:30px;
width:32px;
}
</style>
I have one index.php page, whose content changes whether you activated a session or are logged out.
When users are logged in, a click on the link "showhide" should show the class "users".
When users are logged out the link "showhide" is hidden and instead the link "showhide2" is visible, which should show the class "users2" when its pressed.
I found a jQuery-snippet online that does exactly this and works fine for the link "showhide"
Unfortunately it doesn't work for the link "showhide2" - the class is always visible...
Here's my code:
<div id="content" style="margin-top:10px;height:100%;">
<?php
/*echo "Der Nutzername ist ".$_SESSION['user'];
echo "<br>Die Session lautet ".$_SESSION['sessionname'];
echo "<br>".session_id();*/
$sArray = explode(".",$_SESSION['sessionname']);
$session1 = $sArray[0];
$session2 = $sArray[1];
$sessionausblenden = $_SESSION['sessionname'];
if (!isset($sessionausblenden)){
echo "<style type='text/css'>
#showhide{
visibility:hidden !important;
}
.users{
visibility:hidden !important;
}
#logout {
visibility:hidden !important;
}
</style>";
}
elseif (isset($sessionausblenden)){
echo "<style type='text/css'>
#showhide2{
visibility:hidden !important;
}
.users2{
visibility:hidden !important;
}
</style>";
}
?>
<a id="showhide" href="#" style="background:#<?php echo $session2?>;">+</a>
<a id="showhide2" href="#" style="background:#<?php echo $session2?>;">?</a>
<a id="logout" onclick="return confirm('Are you sure?')" href="logout.php">-</a>
<script type="text/javascript">
$(document).ready(function () {
$('.users').hide();
$('a#showhide').click(function () {
$('.users').toggle(400);
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.users2').hide();
$('a#showhide2').click(function () {
$('.users2').toggle(400);
});
});
</script>
<center><h1>Group Chat In PHP</h1></center>
<div class="chat">
<div class="users" style="background-color:#<?php echo $session2?>;">
<?php include("users.php");?>
</div>
<div class="users2" style="background-color:#<?php echo $session2?>;">
<?php include("users.php");?>
</div>
<div class="chatbox">
<?php
if(isset($_SESSION['user'])){
include("chatbox.php");
}else{
$display_case=true;
include("login.php");
}
?>
</div>
</div>
</div>
You can see the live-version here: http://team3.digital-cultures.net/index.php
Just enter a name of your choice and choose an option from "Start" and "Ziel" and your session is started (and a chat is opened).
Can you help me finding the mistake?
Thanks!
It seems an event is not being bound to #showhide2. If you listen at the document level and let it bubble to #showhide as the target, it may work. This can happen for dynamically loaded elements.
Change
$(document).ready(function () {
$('.users2').hide();
$('a#showhide2').click(function () {
$('.users2').toggle(400);
});
});
To
$(document).ready(function () {
$('.users2').hide();
$(document).on('click','#showhide2',function () {
$('.users2').toggle(400);
});
});
Most importantly, please resolve this error:
$(".msgs").animate({scrollTop:$(".msgs")[0].scrollHeight}); on line 2 of chat.js $(".msgs")[0] is undefined.
There are no elements matching $('.msgs'). Wrap it with the following:
if($('.msgs').length) {
$(".msgs").animate({scrollTop:$(".msgs")[0].scrollHeight});
}
This maybe why the event isn't getting bound.
I want display and hide HTML div with ajax,
Situation:
progressbar('on');
very_long_function();
progressbar('off');
I want display div when working very_long_function(); , bUt when finish working I want hide div
Progress bar function:
function progressbar($status){
if($status == "on"){
echo "
<script>
$(document).ready(function() { function() {
$('#load').css('display','inline');
});
</script>
";
}
else{
echo "
<script>
$$(document).ready(function() { function() {
$('#load').css('display','none');
});
</script>
";
}
}
Problem is that div not showing when very_long_function(); working, maybe is possible to solve this priblem with AJAX or jQuery
HTML
<div id="load" style="display: none;"><img src="loading_baras.gif" style="width: 550px; height: 10px; margin-top: -10px"></div>
I think, that you architecture is wrong. You have to user JS for it.
Like next:
$(function(){
$('#load').css('display','inline');
$.post('/very_long_function.php', {url: 'http://www.google.com'}, function(result){
alert(result);
$('#load').css('display','none');
});
});
PHP: very_long_function.php
$url = $_POST['url'];
$result = very_long_function($url);
echo $result;
die;
Are sure that you included jquery lib for using it . Also there is no double $$ in jquery.
Please give the html and after we will correct it.
Hello I have a php page that show 10 articles with read more button hidden all I need is when I hover on the article box the read more show everything is working fine expect when I hover on anything it show read more on first article only not every article
This is my php code
$query = mysql_query("SELECT * FROM stories ORDER BY id DESC LIMIT 0,10");
while ($row=mysql_fetch_array($query))
{
echo "<div class='content_story_block'>
<div class='content_story_block_menu'>$row[title]
<div id='Read_More' style='display:none;' class='content_story_block_menu_span'>Read More</div>
</div>
<div class='content_story_block_row'>$row[brief]</div>
</div>";
}
and this is my jquery code
<script type="text/javascript">
$('.content_story_block').hover(function() {
$('#Read_More').toggle('slow', function() {
// Animation complete.
});
});
</script>
what am I missing ?
Change Read_More from id to class:
<div style='display:none;' class='content_story_block_menu_span Read_More'>
Read More</div>
Then change your script:
<script type="text/javascript">
$('.content_story_block').hover(function() {
$(this).find('div.Read_More').toggle('slow', function() {
// Animation complete.
});
});
</script>
try this
<script type="text/javascript">
$('.content_story_block').hover(function() {
$('.content_story_block_menu_span').each(function(){
$(this).toggle('slow', function() {
// Animation complete.
});
})
});
<script type="text/javascript">
$('.content_story_block').hover(function() {
$(this).next('#Read_More').toggle('slow', function() {
// Animation complete.
});
});
</script>
i have a link that needs to be triggered from a success post:
<?php
if ($_POST["action"] == "1") {
?>
<script type='text/javascript'>
$(window).load(function() {
$(".likepic").click();
});
</script>
<?php } ?>
<script type='text/javascript'>
$(window).load(function() {
$(".likepic").click(function(){
$(".likepic").colorbox({width:"620px", height:"570px", inline:true, href:"#likepic_lightbox"});
});
});
</script>
<div class="blackk" style="display:none;">
<div id="likepic_lightbox">test
</div>
</div>
so if that post action is 1 then run the jquery script and click on the link for something else to happen :)
this is what i tried but without success.
any ideas?
Thanks
Try using $(document).ready() instead of $(window).load()
Also, you'll need to switch the order of your JavaScript blocks. The click handler needs to be defined first.
Play with a test version here: http://jsfiddle.net/irama/bcMp7/
Or see updated code below:
<script type='text/javascript'>
$(document).ready(function() {
$(".likepic").click(function(){
$(".likepic").colorbox({width:"620px", height:"570px", inline:true, href:"#likepic_lightbox"});
});
});
</script>
<?php if ($_POST["action"] == "1") { ?>
<script type='text/javascript'>
$(document).ready(function() {
$(".likepic").click();
});
</script>
<?php } ?>
<div class="blackk" style="display:none;">
<div id="likepic_lightbox">test</div>
</div>
Let us know how you go!