I want to show a hover card on mouse move over a div class. So I have done the following class in css
#descriptionBox2{
position: absolute;
display: none;
background-color: #EEEEEE;
padding: 7px;
font-size: 20px;
border: 1px solid #EEEEEE;
box-shadow:2px 2px 5px 2px #DDDDDD;
width: 250px;
}
And in the body I have just added the following code..
<div id="descriptionBox2"></div>
and following is the div on which I want to show the hover card
<?php $serial = 1; foreach($readAll as $readOne):?>
<div class="readone" explanation="<?php echo $readOne['explanation'];?>" memorize="<?php echo $readOne['memorize']; ?>">
<span style="font-weight:bold;"><?php echo $serial++. '. ';?></span><?php echo $readOne['question_desc']. '<br><br>';?>
<span style="font-weight:bold;padding-left:30px;">Answer: </span><?php echo $readOne['answer'];?>
</div>
<br><br>
<?php endforeach;?>
</div>
And following is the js
$(document).ready(function(){
$('.readone').mousemove(function(e){
var explanation = "<strong>Explanation : </strong><br><span style='padding-left:20px;'>"+ $(this).attr('explanation') + "</span>";
var memorize = "<strong>Memorizing Tips : </strong><br><span style='padding-left:20px;'>"+ $(this).attr('memorize') + "</span>";
var msg = explanation + "<br><br>" + memorize;
$('#descriptionBox2').html(msg).show();
$('#descriptionBox2').css('top', e.clientY+20).css('left', e.clientX+20);
$(this).css({'background-color':'#98bf21'});
}).mouseout(function(){
$('#descriptionBox2').hide();
$(this).css({'background-color':'#FFFFFF'});
});
});
Everything works fine. But when I scroll down the hover card just get at more distant from mouse pointer. The same code ran well in other places. but why it is not working in this case . ANy idea?
maybe you can use :
position: fixed;
in your #descriptionBox2 declaration
Related
I want to insert new carousels onto my page dynamically, i have added a reduced test case of what im trying to do. The only real different is how the new carousel is being added, my test case it just a string which gets appended. but in my project, it will be an ajax request.
Anyway, as you can see, i am destroying all carousels on click, then once I've added the new carousel, i try and initialise the new one as well as the old one.
The problem is, the new one isn't effected. but the old one still works.
Any ideas and getting the new one to work too?
Test case: https://codepen.io/jsayner/pen/ab06bdabd3d74afc5e84cb7730d21b52
// external js: flickity.pkgd.js
var $carousel = $('.carousel').flickity();
$(document).on("click", "#button", function (e) {
$carousel.flickity('destroy');
var template = "<div class='carousel'>"
+ "<div class='carousel-cell'></div>"
+ "<div class='carousel-cell'></div>"
+ "<div class='carousel-cell'></div>"
+ "<div class='carousel-cell'></div>"
+ "<div class='carousel-cell'></div>"
+ "</div>";
$("body").append(template);
$carousel.flickity();
});
/* external css: flickity.css */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: #FAFAFA;
}
.carousel-cell {
width: 66%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(carousel-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.js"></script>
<link href="https://unpkg.com/flickity#2/dist/flickity.css" rel="stylesheet"/>
<button id="button" type="button">show carousel</button>
<div class="carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
You should change
$carousel.flickity();
to
$('.carousel').flickity();
The variable $carousel is only the instance when you fisrt init flickity, so not work for the added element.
I'm trying to change visibility of some divs by click.
I'm adding "main" divs and "sub" divs using a php foreach loop on an array.
After that I add events using javascript to the elements having a specific class.
The problem is that the javascript function gets the name of the element with double quotes at the start and in the end.
I could solve by using a "substring" but I'm pretty new to web programming and I need to understand why this happens or I'll never improve my skills.
Below there is all my code.
<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
position:relative;
display: inline-block;
width: 48%;
margin: 3px;
border: 3px solid #CCC;
}
.Class2 {
position:absolute;
bottom:0;
right:0;
border: 1px solid #CCC;
margin:1px;
background: #FFC;
}
.H_p {
border: 1px solid #CCC;
display: inline-block;
}
.Opt {
border: 1px solid #CCC;
display: none;
}
</style>
</head>
<body>
<?php
$Divs = array('Div1'=>'Class1',
'Div2'=>'Class1',
'Div3'=>'Class1',
'Div4'=>'Class1',
'Div5'=>'Class1');
$AskToShow=array("Field1"=>"1.1.1", "Field2"=>"1.2.1", "Field3"=>"1.3.1");
foreach ($Divs as $Name=>$Class){
echo '
<div class="'.$Class.'">';
echo $Name.'<br/>';
echo '
<p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';
echo '
<div id=Opt'.$Name.' name="Opt'.$Name.'" class="Opt" >';
foreach ($AskToShow as $H_Name=>$Id){
echo'
<p id="H_'.$Id.'" class="H_p">'.$H_Name.'</p>';
}
echo '
</div>';
echo '
</div>';
}
?>
<script>
var MyClass = document.getElementsByClassName("Class2");
var myFunction = function() {
var SenderId = this.id;
alert (SenderId);
var SubId = SenderId.substring(SenderId.indexOf('_')+1)
alert (SubId);
var SubSH = document.getElementById(SubId);
if (!SubSH){
alert("Empty"); //This is the alert shown!!
}else{
alert(SubSH.name);
}
if (SubSH.style.display == 'none'){
document.getElementById(SubId).style.display = 'block';
}else{
document.getElementById(SubId).style.display = 'none';
}
};
for (var i = 0; i < MyClass.length; i++) {
MyClass[i].addEventListener('click', myFunction, false);
}
</script>
</body>
</html>
<p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';
You are using ” (RIGHT DOUBLE QUOTATION MARK) to delimit your attribute values. Only " (QUOTATION MARK) and ' (APOSTROPHE) are allowed.
The RIGHT DOUBLE QUOTATION MARK is, therefore, being treated as data and not as a delimiter.
This code example shows the three characters at a large font size so you can clearly see the difference between them.
body { font-size: 50px; }
”<br>"<br>'
This is often caused by writing HTML using a word processor instead of a text editor.
<p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';
There you used the wrong quote type ”.
Hope this fixes it.
Here is a page I am working on:
https://1stamender.com/testing-elements.php
This is basically a list of latest articles on my site and right now I have a UI I'm looking to improve. Right now I have it defined using bootstrap and my own CSS and can't seem to find a solution.
Basically I can see there is some funky spacing due to the inherent way that divs handle float: left;.
It pushes divs into a new row versus try to push itself up to the div above it leaving for some awkward spacing. This can be fixed by setting a height but the heights will generally be different for each article.
I haven't the faintest idea how to do this CSS wise I've been googling forever...
Edit: Apologies I know you want to see the code itself:
echo '
<div class="articlecontainer">
<div class="articlepicture2">
<img src="'.$mainpic.'" alt="'.$headline.'" width="100%">
</div>
<div class="articledescription2">
<a href="article.php?articlenumber='.$articlenumber.'" class="articlelink2"><strong><span class="headlinearticle2">'.$headline.'</span></strong><br>
'.substr($content,0,100).'...</a>
<hr>
Written by: ';
$sqlauthor = "SELECT * FROM ACCOUNT WHERE USERNAME='$articleauthor'";
$resultauthor = $conn->query($sqlauthor);
if ($resultauthor->num_rows > 0) {
// output data of each row
$rowauthor = $resultauthor->fetch_assoc();
$authordisplayname = $rowauthor['DISPLAYNAME'];
echo '<i>'.$authordisplayname.'</i><br>';
echo 'Overall Rating: ';
echo '<img src="images/main/rating/'.$star.'.png" alt="Rating 0.5" width="80">';
}
echo '
</div>
</div>
';
CSS:
.articlecontainer{
background-color: #666;
border: solid 1px #000;
color: #fff;
padding: 0px !important;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom:10px !important;
border-radius: 5px;
width: 25%;
float: left;
You can either use three variables for each column and always toggle the used one or you could use css-columns, but you would change the posts-order to top to bottom.
CSS-Columns: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
PHP: Something like this:
$column = 1;
$column_1_html = "";
$column_2_html = "";
$column_3_html = "";
foreach($boxes => $box) {
$box_html = "...";
if($column == 1) {
$column = 2;
$column_1_html .= $box_html;
} else if($column == 2) {
$column = 3;
$column_2_html .= $box_html;
} else if($column == 3) {
$column = 1;
$column_3_html .= $box_html;
}
}
As stated in the comments this library might be something for you: https://masonry.desandro.com/layout.html
I'm trying to give my text a background colour, simple enough but I have come into some difficulty.
Here's my html
<div class="hero_text">Screen Shot</div>
I needed to break this apart so that if there was a space, then the next word go onto a new line.
Here's my jquery
jQuery(document).ready(function($) {
$('.hero_text').html(function(index, text) {
return text.replace(' ', '<br>');
});
});
Here's my css
.hero_text {
color: #FFF;
text-align: right;
background: green;
padding-left: 5px;
font-size: 30px;
display: inline;
float: right;
padding-right: 9px;
clear: both;
position: fixed;
right: 0;
bottom: 30%;
line-height: 30px;
}
Here's an image of what I'm getting at the moment
And here is what i'm trying to achieve
Notice the pink has got a little bit of padding to the left and right of the word but as the words are different length then the pink should be smaller and larger depending on the word?
Thanks
One approach, using jQuery to manipulate the HTML, is:
$('.hero_text').html(function (i,oldHTML){
return oldHTML.replace(/\b([a-zA-Z]+)\b/g,'<span>$1</span>');
});
Coupled with the additional CSS:
.hero_text span {
background-color: green;
float: right;
clear: right;
}
JS Fiddle demo.
http://jsfiddle.net/S6sfu/
This is one without java script, will this do?
HTML
<div class="hero_text">Screen</div>
<div class="hero_text">Shot</div>
<div class="hero_text">A quick message</div>
CSS
.hero_text {
color: #FFF;
text-align: right;
background: green;
padding-left: 5px;
font-size: 30px;
display: inline;
float: right;
padding-right: 9px;
clear: both;
right: 0;
bottom: 30%;
line-height: 30px;
}
You can split up the text into an array and than add the spans as you want. Somewhat like this:
jQuery(document).ready(function($) {
var textArray= $('.hero_text').html().split(' ');
$('.hero_text').html('<span style="background: green;">'+textArray[0]+'</span><br>'+'<span style="background: green;">'+textArray[1]+'</span>');
});
Check out the following url: http://css-tricks.com/multi-line-padded-text/
Nearly all possible methods are supplied there.
If you don't have access to the html you could move the contents of the div to a span:
(Which is a VERY bad idea to begin with)
var $node = $('.hero_text');
var text = $node.innerHtml();
var $span = $('<span class="hero_text"></span>');
$span.appendTo($node.parent());
$node.remove();
See if this helps. I have updated the javascript in your code.http://jsfiddle.net
var text_arr = $('.hero_text').text().split(' ');
$('.hero_text').html('');
for(i=0; i< text_arr.length; i++)
{
$('.hero_text').append('<span class="text'+i+' clearfix">'+ text_arr[i] +'</span>');
}
If you dont have access to div or the css ,
this is the solution you can consider :
UPDATED
jsfiddle : http://jsfiddle.net/P5LNx/7/
jQuery(document).ready(function ($) {
$('.hero_text').html(function (index, text) {
var bgcolor = $(this).css('background');
$(this).css('background', 'transparent');
var txt = text.split(' ');
var content = '<span style="background: ' + bgcolor + ';position:relative;">' + txt[0] + '</span><br>';
content += '<span style="background: ' + bgcolor + ';">' + txt[1] + '</span>';
return content;
});
});
Steps :
Removed background of the div.
Added 2 <span> with same background as div
To <span>s, added your words (1 in each)
im familiar with php, but a serious learner in js, i have tried 3 methods to achieve my goal and i have seen the method used below that seems the easiest to implement so i can achieve my goal, but for some reason it does not work. I have included only the necessary bits for the specific function that isnt working, this all works inside a while loop based on entries in a db, seperated with a {$page_trackid} to distinguish between each function and link to it.
I understand a 'this' style function could be used, but as i say im so new to js im just trying to achieve the necessary before i extend to getting even more complex.
Is there something im doing totally wrong here?
Cheers
<head>
<style>
.hidden {display:none;}
.visible {display:block;}
.subtext_img {
width: 100px; height: 100px; padding-top: 10px; padding-right: 10px; float: right;
}
.subtext {
padding-left: 10px;
}
.arrow_box { padding-left: 100px; position: absolute; z-index: 100; background: #88b7d5; border: 4px solid #c2e1f5; width: 580px; height: 120px;} .arrow_box:after, .arrow_box:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-left-color: #88b7d5; border-width: 10px; top: 30%; margin-top: -10px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-left-color: #c2e1f5; border-width: 16px; top: 30%; margin-top: -16px; }
</style>
</head>
<body>
<?
$data = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE username = '$user' ORDER BY datetime DESC")
or die(mysql_error());
$page_trackid = '1'; //reset page track id
// get a whole bunch of data, track info & user info based on some cross referencing via id
while ($info = mysql_fetch_array($data)) {
$db_trackid = $info['id'];
$username = $info['username'];
//data 2 track info based on db track id
$data2 = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE id = '$db_trackid' LIMIT 1")
or die(mysql_error());
$info2 = mysql_fetch_array($data2);
//data 3 is user profile data based on db track id
$data3 = mysql_query("SELECT * FROM users WHERE username = '$username' LIMIT 1")
or die(mysql_error());
$info3 = mysql_fetch_array($data3);
//data 4 profile image based on user id, track uploader*
$data4 = mysql_query("SELECT * FROM user_profile_pic WHERE username = '$username' ORDER BY datetime DESC LIMIT 1")
or die(mysql_error());
$info4 = mysql_fetch_array($data4);
echo "
<script>
function showbox(userinfo_{$page_trackid}){
document.getElementById(userinfo_{$page_trackid}).style.visibility='visible';
}
function hidestuff(userinfo_{$page_trackid}){
document.getElementById(userinfo_{$page_trackid}).style.visibility='hidden';
}
</script>
<div id='userinfo_{$page_trackid}' class='arrow_box' style='display: none;'> <img src='" . $info4['Image'] . "' class='subtext_img'>
<h2 class='subtext'><a href='http://XXXX/XXX/" . $info2['username'] . "'>" . $info2['username'] . "</a></h2>
<p class='subtext'>" . $info3['user_title'] . "</p>
<p class='subtext'><a href='" . $info3['website_link'] . "' target='_blank'>" . $info3['website_link'] . "</a>
</p>
</div>";
echo "
<div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'>
<a href='javascript:showbox_{$page_trackid}()'><img style='height: 20px;' alt='Track stats' src='http://XXXXXX/play1/skin/user-profile2.png' style=''></a>
</div>";
}
?>
</body>
Separation of concerns: avoid manipulating an element's style directly in javascript. styling belongs with css.
Here's what I would do:
CSS
.hidden {
display: none;
}
Javascript:
// show an element
document.getElementById("my-id").classList.remove("hidden");
// hide an element
document.getElementById("my-id").classList.add("hidden");
classList is not supported in old browsers, so make sure to include the polyfill at https://developer.mozilla.org/en-US/docs/DOM/element.classList
Your issue seems to be that in the HTML you are setting the display property to none, but in the script you are setting the visibility property. They are different things. Set one or the other in both places.