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;
}
Related
I have 2 div.
BODY
<div class="div1"></div>
<div class="div2"></div>
And I´m trying to assign to put the SAME HEIGHT to both linked to the content (dynamic content from database with PHP)
HEADER
<script>
$(document).ready(function() {
var divHeightdiv1= $(".div1").height();
var divHeightdiv2 = $(".div2").height();
if(divHeightdiv1 > divHeightdiv2)
{
$(".div2").height(divHeightdiv1);
}
else
{
$(".div1").height(divHeightdiv2);
}
});
</script>
STYLE
.div1, .div2
{
border: 1px solid black;
}
Works perfect for DESKTOP computer, but not for mobiles.
Anyone knows WHY?
Note: Excuse any error product of rewriting here the code.
THANKS!
You may want to give it a try with pure CSS (without using jQuery)
The HTML
<div class="layout">
<div class="rows">
<div class="column div1"></div>
<div class="column div2"></div>
</div>
</div>
The CSS
.layout {
display: table;
}
.layout .rows {
display: table-row;
}
.layout .rows .column {
display: table-cell;
border:1px solid #000;
}
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.
I am trying to implement Rotate3Di, found here: http://www.zachstronaut.com/projects/rotate3di/
I can get my images to flip, but the back side is only showing a mirror image of the front and not unique content that I am pulling from a database. Thanks for any help in advance.
<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function () {
$('#movienav li div.back').hide().css('left', 0);
function mySideChange(front) {
if (front) {
$(this).parent().find('div.front').show();
$(this).parent().find('div.back').hide();
} else {
$(this).parent().find('div.front').hide();
$(this).parent().find('div.back').show();
}
}
$('#movienav li').hover(
function () {
$(this).find('div').stop().rotate3Di('flip', 180, 1000, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 1000, {sideChange: mySideChange});
}
);
});
</script>
HTML
<div id="movienav">
<ul>
<li><div class="front"><img src="<?php echo $imglink; ?>" width="340" height="450" class="dvdcover" /></div>
<div class="back">
<?php echo $description; ?>
</div>
</li>
</ul>
</div>
CSS
#movienav {
height: 450px;
width:75%;
float:left;
margin-top:25px;
clear:left;
padding-bottom: 45px;
}
#movienav li {
width: 340px;
height: 450px;
float: left;
margin-right: 10px;
position: relative;
display:inline;
list-style:none;
}
#movienav li div {
width: 340px;
height: 450px;
overflow: hidden;
background: #161616;
position: absolute;
top: 0;
left: 0;
}
#movienav li div.back {
left: -999em;
padding-bottom: 15px;
background-color:#161616; /*max-height:450px; overflow:auto;*/
margin-top: 0;
}
SOLVED
Changed above lines to:
$('#movienav li').hover(
function () {
$(this).find('div').stop().rotate3Di('180', 400, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 400, {sideChange: mySideChange});
}
);
http://davidwalsh.name/css-flip
I think you want backface-visibility: hidden;
I'll be honest I've only done this via CSS and not with javascript, but I had the same issue at first until I set the backface-visibility. Doing everything via javascript might require some extra magic.