As per image below I want to show the div beneath the reply button.
(Div being the text box and send button)
My code below works except no matter which reply button you press the text box opens on the first reply button caused by the javascript function hiding MyDiv and each ID being MyDiv. The problem lies that this need to be dynamic as a I dont know ho many messages I will have.
This is not all the code but should be enough to see what is going on.
UPDATED for minimal code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<p>Example</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<br/>
<br/>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<br/>
<br/>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
</body>
</html>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
https://jsfiddle.net/vzcq7t0e/
Thanks
Ben
EDIT
Similar to this question but as above I need it to be dynamic.
Display div and hide another div by button press
EDIT 2
I am still struggling with this.. I have been trying to use jquery $(this).parent().hide();
but having no luck. Should I continue with this method or try something else?
So I worked it out. adding count ID to the ID tag and a class to hide all divs then show the div with the ID requested.
<div <?php echo 'id="myDIV ' . $x . '"' ?> class="reply" style="padding-top: 30px;">
<style>
.reply{
display: none;
}
#myDIV {
width: 100%;
margin-top: 30px;
display: none;
}
</style>
<script>
function myFunction(divid) {
var x = document.getElementById("myDIV " + divid);
if (x.style.display === "block") {
x.style.display = "none";
} else {
document.querySelectorAll('.reply').forEach(function(el) {
el.style.display = 'none';
});
x.style.display = "block";
}
}
</script>
Related
Hello i am having php code for pagination where page number displaying i want to use only
Next and Previous Button How can i achieve this
Here is my code
<?php
session_start();
$con = mysql_connect('localhost', 'root', 'root');
mysql_select_db('Helixcrm', $con);
$per_page = 15;
$select_table = "select * from tbl_site_configs";
$variable = mysql_query($select_table);
$count = mysql_num_rows($variable);
$pages = ceil($count/$per_page)
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Qjuery pagination with loading effect using PHP and MySql</title>
//Scripts
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function Display_Load() {
$("#load").fadeIn(1000, 0);
$("#load").html("<img src='load.gif' />");
}
function Hide_Load() {
$("#load").fadeOut('slow');
};
$("#paginate li:first").not('.page').css({
'color': '#FF0084'
}).css({
'border': 'none'
});
Display_Load();
$("#content").load("pagination.php?page=1", Hide_Load());
<? php $page; ?>
$("#paginate li").not('.page').click(function() {
Display_Load();
$("#paginate li").css({
'border': 'solid #193d81 1px'
}).css({
'color': '#0063DC'
}).removeClass("active");
$(this).css({
'color': '#FF0084'
}).css({
'border': 'none'
}).addClass("active");
var pageNum = this.id;
$("#content").load("pagination.php?page=" + pageNum, Hide_Load());
});
$("#paginate li.page").click(function() {
var page = $(this).attr("data-value");
if (page == "prev") {
var index = $("#paginate li.active").index();
if (index > 1) {
$("#paginate li.active").prev().trigger("click");
} else {
$("#paginate li.active").trigger("click");
}
} else {
var index = $("#paginate li.active").index();
if (index < $("#paginate li").length - 2) {
$("#paginate li.active").next().trigger("click");
} else {
$("#paginate li.active").trigger("click");
}
}
});
});
</script>
<style type="text/css">
#load {
width:30px;
padding-top:50px;
border:0px green dashed;
margin:0 auto;
}
#paginate {
text-align:center;
border:0px green solid;
width:500px;
margin:0 auto;
}
.link {
width:800px;
margin:0 auto;
border:0px green solid;
}
li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #193d81;
color:#0063DC;
}
li:hover {
color:#FF0084;
cursor: pointer;
}
</style>
</head>
<body>
<div id="content" ></div>
<div class="link" align="center">
<ul id="paginate">
<li id="" class="page" data-value="prev">Prev</li>
<?php
for($i=1; $i<=$pages; $i++) {
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
<li id="" class="page" data-value="next">Next</li>
</ul>
</div>
<div style="clear:both"> </div>
<div id="load" align="center" ></div>
</body>
</html>
please help me to short out my problem
Any help will be appreciated
If you can't solve your issue, I'd recommend that you don't really need javascript for pagination, it can be achieved purely through PHP (Which is actually really simple to do), I've done it myself for one of my websites using this code example..
http://www.developphp.com/page.php?id=289
Go ahead and check it out if you can't solve this problem out,
Also he produced a video explaining which sections you need to change, and going through what each part of the code does/means:
https://www.youtube.com/watch?v=K8xYGnEOXYc
Im guessing removing the echo wont work because then you have no data elements which have active bound to them.
Try making a .hidden class in your css to hide each of your echoed li elements, that way they can still have active bound to them, but they won't be visible on the DOM
.hidden { display: none; }
Your markup would then look something like this
<li class='next'><li>
<li id="1" class="hidden active">1</li>
<li id="2" class="hidden">2</li>
<li id="3" class="hidden">3</li>
<li class='prev'><li>
i have a problem
i'm trying to edit a website
it has a scroller (behavior is like a inverted waterfall)
the website shows events (data) already recorded in the database...
i want to change the font size of the scroller, i tried to change all the labels there and nothing.
this is the CSS block
<style type="text/css">
body {
font-family: "Engravers MT", "Engravers MT",sans-serif;
line-height: 1em;
color: #f0edd9;
font-weight:bold;
font-size: 40px;
background-color:#8A0829;
}
pscroller1{
width: 500px;
height: 560px;
font-family: "old republic", "old republic";
font-size:50px;
border: 1px solid black;
padding: 5px;
background: red;
}
</style>
this is the scroller, i didn't do that, it was made by someone else.
<script type="text/javascript">
var pausecontent=new Array()
</script>
<script type="text/javascript">
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
here is how it set the message in the scroller
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
this is the body:
<body>
<!--<div align="center">
<img src="picture1.fw.png" align="absmiddle"/>
</div>
!-->
<div align="LEFT" style="width:1000px ">
<div style="height:570px; width:50%; float:right; background-color:#8A0829">
<?php
require_once('functions.php');
$phparray=events();
for($i=0; $i <count($phparray); $i++ )
{
echo '<script language="JavaScript"> pausecontent['.$i.'] = "'.$phparray[$i].'";</script>';
}
?>
<script type="text/javascript" >
document.writeln("EVENTS")
new pausescroller(pausecontent, "pscroller1", "", 5000)
document.write("<br />")
function refresh(time) {setTimeout("location.reload(true);",time);}
refresh(43200000); </script>
</div>
</div>
<div align="right"> EVENTS</div>
<div align="center" style="height:570px; width:300px; float:LEFT; background- color:#8A0829">
<embed src="video.vob" autostart="true" loop ="true" width="500" height="570" >
</div>
</div>
<div align="center">
<img src="background.jpg" align="absmiddle"/>
</div>
</body>
like you can see in the
new pausescroller(pausecontent, "pscroller1", "", 5000)
document.write("")
the pscroller1 should change the font color and size of the pausecontent but it does only change the style of the font of the data, although the return data of document.write (UNDEFINED) is working fine, it's size, style and color can be changed
pscroller1 is not an html entity. You cannot style it like that.
You can add an ID or a class to the 'pscroller' and style that
a{ <- html entity
.someClass{ <- styling a class
#someID{ <- styling an ID
I'm developing the news feed by using jquery and php. I'm using 2 div for this.
Here If the main div reached at the bottom It should wrap automatically.
<html>
<div id="main">
<?php
for($i=0;$i<15;$i++)
{
?>
<div id="sub">hai</div>
<?php
}
?>
</div>
</html>
Script:
<script src="at/js/jquery.js"></script>
<script>
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
}
});
</script>
Style:
<style>
#sub{
border:solid 2px #000000;
height:30%;
width:20%;
}
</style>
You can solve this using CSS clear:left; and float:left; property.
Check this demo jsFiddle
HTML
<div id="main">
<div id="sub">hai</div>
<div id="sub">hai</div>
<div id="sub">hai</div>
<div id="sub">hai</div>
</div>
CSS
#sub{
border:solid 2px #000000;
height:30%;
width:20%;
clear:left;
float:left;
}
JQuery
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
}
});
Also you can solve dynamically assign css property,
Check this demo jsFiddle
JQuery
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
$("#sub").css({
border: "solid 2px #000000",
height: "30%",
width: "20%",
clear: "left",
float: "left"
});
}
});
Use prependTo jQuery function instead of appendTo
Here I am using drag and drop in jQuery.
I get the set of questions and set of answers from Database in array(article->question, article->answers), where answers be drag and dropped in the questions text box. On refresh the page the dragged values are comes to the original place not in that particular text box were I dropped.
Here My coding.
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<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>
<!--<link rel="stylesheet" href="/resources/demos/style.css" /> -->
<style>
/*#draggable { width: 50px; height: 20px; padding: 0.5em; } */
.drag_ans {
background: none repeat scroll 0 0 transparent;
border: 0 none;
width: 100px;
}
#draggable {
width: 50px;
height: 20px;
background: white;
}
#droppable {
float: left;
margin: 50px;
width: 500px;
height: 300px;
border: green;
}
#ques {
background: none repeat scroll 0 0 #FFFFFF;
padding: 10px;
width: 100px;
}
</style>
<script>
$(document).ready(function(){
$("#answer").click(function(){
// alert('find a score');
});
});
</script>
</head>
<body>
<div class="container_inner">
<?php
foreach($data as $article)
{
echo "<p>";
echo "<b>";echo $article->article_name;
echo"</b>";
echo "</p>";
echo "<p>";
echo $article->description;
echo "</p>";
echo $article->video; echo "<br>";
}
?>
<?php
$add=1;
foreach($question as $article)
{
?>
<!-- <div id="drop"> -->
<p>
<?php echo $article->question; ?>
<input type ="text" id="ques_<?php echo $add; ?>" name="" class="ui-widget-content" />
</p>
<!--</div> -->
<?php
$add++;
}
?>
<?php
$counter=1;
foreach($question as $article)
{
?>
<script>
$(function() {
$("#draggable_<?php echo $counter; ?>").draggable({ revert: 'invalid' });
$("#ques_<?php echo $counter; ?>").droppable({
drop: function( event, ui ) {
$(this).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
<div id="draggable_<?php echo $counter; ?>" class="ui-widget-content drag_ans">
<p>
<?php echo $article->answer; ?>
</div>
</p>
<?php
$counter++;
}
?>
<p> <input class="green_but" type="submit" name="NEW_SUBMIT" value="Submit" id="answer"/> </p>
</div>
</body>
</html>
Drag and Drop working fine and on refresh the page values all empty in the question text box.
How to validate question and answer in jquery as this answer should store in DB after it dropped the question text box. And when clicking submit button, if answer to the question wrong the score should reduce. EX: If user answer set correct answer 4 out of 10 then the score should 4 out of 10.
I'm not sure what we are suppose to do...you say the answer in your post....the settings need to be saved. Obviously they are not getting saved so you have two methods to do so...
1) Submit a form and save the values there
2) Save the values via ajax attached to the one of the event handlers (probably the drop one : http://api.jqueryui.com/draggable/#event-stop)
My recommendation is not to do the whole drag and drop functionality while you are still learning the basics of web development.
UPDATE I am trying to echo a div after info is submitted on a contact form. My website is here: http://tinyurl.com/bdmhv7u
When you click on rsvp and enter the information, I have a graphic that I would like to be shown. Using this code, it shows, but only for an instant. Any ideas are appreciated.
<?php
ob_start();
session_start();
if( isset($_POST['submit'])) {
include("process.php");
unset($_POST['submit']);
} else {
}
ob_flush();
?>
<div id="gotit">
<div id="gotitimg">
<img src="images/gotit.png" width="100" height="100">
</div>
</div>
<script type="text/javascript" language="javascript">
$("#submit").click(function (event) {
$("#gotit").fadeIn(1000, function() {
});
});
</script>
#gotit {
position:fixed;
z-index:999;
margin-top:400px;
display:none;
width:100%;
}
#gotitimg {
float:right;
width:100px;
height:100px;
}
You did not provide the code, but you can try to add width and height to your div:
example
#gotit {
float:right;
width: 125px;
height: 125px;
background-image:url(../gotit.png);
position:fixed;
z-index:20;
margin-top:50px;
}