PHP file upload inside modal window - javascript

I have been searching the Internet for days with no luck. I need a modal window to upload a file and pass additional values to the script. The modal window needs to open when the user clicks on "This is Question #". Below is my current script. Any help or direction would be greatly appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
/*background-image: url(/images/page.png);*/
background-position: 0 1px;
background-repeat: no-repeat;
padding-left: 20px;
}
a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
display:none;
}
</style>
<script src="/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function addLine(what) {
$("#" + what).append('<li>URL to uploaded document</li>');
};
function myToggle(what){
$("#" + what).toggleClass('hidden');
};
</script>
</head>
<body>
<ul>
<li class="folder">
Test
<ul class="hidden" id="Test1">
<li class="folder">
Test1-2
<ul class="hidden" id="Test1-2">
<li>
This is Question 1
<ul id="Question1"></ul>
</li>
<li>
This is Question 2
<ul id="Question2"></ul>
</li>
<li>
This is Question 1
<ul id="Question3"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

Try using Ravishanker Kusuma's jQuery File Upload Plugin, here:
http://hayageek.com/docs/jquery-upload-file.php
To make the dialog modal, you just need to create a div like this:
<div id="myOverlay"></div>
and style it like this:
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;overflow:hidden;background:black;opacity:0.5;z-index:10;}
The overlay DIV is initially hidden (by appending display:none; to the end of the css above). When you want it visible, you remove the display:none;. When visible, it will overlay all the rest of the page, with the exception of your upload form which must have a higher z-index value.
Making a dialog modal really is that simple.
So, using Ravi's code, you just show a DIV like this:
See This jsFiddle Demo
HTML:
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
<div id="myOverlay"></div>
<div id="box">
<div id="box-inside-div">
<div id="fileuploader"></div>
</div><!-- #box-inside-div -->
</div><!-- #box -->
<div id="main">
<h1>Upload a File Page</h1>
<p>To upload a file, click the button below</p>
<input type="button" id="myButt" value="Upload" />
</div>
CSS:
/* #myOverlay on two lines for readability in this SO answer */
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;}
#myOverlay {background:black;opacity:0.5;z-index:10;display:none;}
#box {position:absolute;top:150px;left:125px;height:200px;width:550px;background:white;z-index:15;display:none;}
#box-inside-div{margin-left:20px;margin-top:30px;}
jQuery/javascript:
$(document).ready(function() {
$('#myButt').click(function () {
$('#myOverlay').show();
$("#box").show();
$("#fileuploader").uploadFile({
url: "upload_recv.php",
fileName: "myfile",
onError: function(files,status,errMsg){
/* onError because (1) jsFiddle cannot do ajax */
/* AND (2) there is no upload_recv.php file! */
$('#myOverlay').hide();
$('#box').hide();
alert('The file is now on the server');
}
});
});//END mybutt.click
});
When the upload is completed you would hide both the #myOverlay DIV and the #box DIV (which contains the fileuploader DIV). In the jsFiddle example, to determine when the upload has finished, I used the onError event (because jsFiddle cannot do either ajax or the back end PHP processing). You would probably use the onSuccess or afterUploadAll events.
For more information on how to do that, see the demos on the HayAGeek page.
And finally . . . how to process the file on the server once uploaded?
This is done by the PHP processor file you specified in the jQuery code above. In the above example, we named it upload_recv.php
On the HeyaGeek demo page, see Server Side at the top right.

Related

Why on('click', function ()) isn't working in jQuery? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a very simple website with some menu tabs (i.e. Home, About Me etc.) and few paragraphs. I added click function inside my .JS file so that the clicking on tab can navigate to the desired paragraph (or page). But it's not working.
I should refernce to this post as I posted back.
[NOTE: I have apache running in my computer and xwamp is installed. I have jquery source added into my file and they are accurately saved in correct path or file. Besides I have Bootstrap installed, though I didn't necessarily need to set path for any file to it.]
My code:
main.php:
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main_interaction.js"></script>
<div class="row">
<div id="header" class="col-xs-12">
<h1>Welcome to my green world!</h1>
</div>
<div class="col-xs-4">
<ul>
<li id="home">HOME</li>
<li id="gallery">GALLERY</li>
<li id="about">ABOUT ME</li>
<li id="contact">CONTACT ME</li>
<li id="diary">MY DIARY</li>
<li id="blog">BLOG</li>
</ul>
</div>
<div class="col-xs-8 home">
<p>Thank you for spending your time to visit my website. My name is Jabir Al Fatah. I live in Sweden. I have a lot of interest in web developing and 3d graphics designing. I am a travel addicted guy. I love to travel and have experience about diversity among life and nature. I am passionate. I don't do everything just becuase I am obliged to do,rather I like to take risk to be done with something just because I like.I haven't have a wonderful childhood in my life. But I admit it that my parents were surprisingly aware of my future and even every singlestep in my life. Their love and affection fulfilled all of my demand.Well, I just admired them a little. There are tons of others stuff I can say. However, in my life, changes happen very fast.</p>
</div>
<div class="col-xs-8 gallery hidden">
<p>This is the gallery.</p>
</div>
<div class="col-xs-8 about hidden">
<p>This paragraph should appear while clicking on "About me". Beisides, it's not accurately placed in the window. I need to fix that .Another problem is that this paragraph moves under the menu area by pushing it up when I make the window size smaller.</p>
</div>
<div class="col-xs-8 contact hidden">
<p>Contact me here.</p>
</div>
<div class="col-xs-8 diary hidden">
<p>My diary will be here.</p>
</div>
<div class="col-xs-8 blog hidden">
<p>Blog posts appear here.</p>
</div>
<div id="footer" class="col-xs-12">Developed by Jabir Al Fatah</div>
</div>
</body>
</html>
.JS:
$("li").on('click', function () {
$(".col-xs-8").addClass("hidden");
$("." + $(this).attr("id")).removeClass("hidden");
});
.CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.row {
margin: 0;
}
#header {
background-color: mediumturquoise;
text-align: center;
padding: 20px;
border: 4px solid crimson;
}
.col-xs-8 {
text-align: center;
font-family:'Verdana';
color: mediumblue;
font-size: 13pt;
}
.col-xs-4{
border: 4px solid crimson;
background-color: yellow;
line-height: 40pt;
font-family:'Tahoma';
font-size: 15pt;
font-weight: bold;
margin: 0;
padding: 0;
}
.col-xs-4 ul {
list-style-type: none;
}
#footer {
background-color: gray;
border: 2px solid green;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
li:hover {
cursor: pointer;
text-decoration: underline;
}
You're including (and thus executing) the JavaScript before the elements exist on the page. HTML/JavaScript is processed in the order in which is exists in the DOM. So when this runs:
$("li")
the parser is only at the top of the HTML body and hasn't loaded any li elements into the DOM yet. Thus, that selector doesn't find anything.
Either put the JavaScript at the end of the DOM or wrap it in a document ready handler:
$(function () {
$("li").on('click', function () {
// etc.
});
});
(or both)
on not support from jquery 1.9, try live
$("li").live("click",function(){});
I looked at your code and was wondering if replacing
$("li").on('click', function () {
with
$("li").click(function() {
would solve the issue. I've used jquery for a while but have never used ".on" but my onclicks work fine. Hope this helps!

Javascript change source image

I am trying to change the src= image of a parent in a nested ul li when I click on a link. Below is my code. I know how to change the src= with javascript, but I don't know how many tiers I need to navigate up to change the src= image. Example: I want to change src="test.png" when I click on Question1.Answer1.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
/*background-image: url(/images/page.png);*/
background-position: 0 1px;
background-repeat: no-repeat;
padding-left: 20px;
}
a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
display:none;
}
</style>
<script src="/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function addLine(what) {
$("#" + what).append('<li>URL to uploaded document</li>');
};
function myToggle(what){
$("#" + what).toggleClass('hidden');
};
function deleteLine(what) {
$(what).parent().children().remove();
}
</script>
</head>
<body>
<ul>
<li class="folder">
Test
<ul class="hidden" id="Test1">
<li class="folder"><img src="test.png">
Test1-2
<ul class="hidden" id="Test1-2">
<li>
This is Question 1
<ul id="Question1"><li onClick="deleteLine(this)"> Questoin1.Answer1</li></ul>
</li>
<li>
This is Question 2
<ul id="Question2"></ul>
</li>
<li>
This is Question 1
<ul id="Question3"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
object with style property display or visibility: if hidden so no user-action-events possible.
Remove an object == remove from HTML DOM, so no user-action-events possible.
Add an object to HTML DOM so document must be new render. Same if object.style.display was changed.
display changes HTML DOM.
$("#" + what).append('URL to uploaded document'); this changes HTML DOM.
NOT same if object.style.visibility was changed: Visibility must have an exist object in HTML DOM.
please use
so, var imgPointer=document.getElementById("imgID");
put this pointer in an event handler to change imgPointer.src .
imgPointer (value if ID) is a pointer (value) relative to document an not to .
inside of addLine() change imgPointer.src .

Collapsible <div> onclick of link

I have something like the below:
$grabarticles = $db->prepare("
SELECT title, message
FROM articles
");
$grabarticles->execute();
foreach($grabarticles as $articles) {
echo $articles["title"];
//when a user clicks the text above, reveal the below
echo "<div id='article'><br/><br/>";
echo " ".$articles["message"];
echo "</div><br/><br/>";
//when a user clicks the $articles["title"] again, it then collapses
}
I'm not too well versed in Javascript to know, but is there some kind of thing I can do to make the $articles["title"] clickable, and onclick expand below to display the contents of $articles["message"], but also be reversible with another onclick? Here's an image to illustrate:
I want each <div> to be separate from another, so if I open #1 by clicking $article["title"] //1, and then open #2 by clicking the appropriate text, I can then close #1 by reclicking it without interfering with #2.
Wrap the article title in a DOM element that can have events bound to it, such as a span. Then give it a class so we can easily target it.
echo '<span class="article-title">', $articles["title"] ,'</span>';
Next, your id in your foreach loop should be a class, as you're generating multiple elements and only one element can have a single ID.
echo "<div class='article' style='display:none;'><br/><br/>"; // <--note the "class" instead of "id"
Now just make a click function to toggle the visibility of the element.
$('.article-title').click(function(){
$(this).next().toggle(); // find the next element after this one and toggle its visibility
});
Use jscript
<script type="text/javascript">
$(function () {
$('#testTitle').click(function (e) {
if ($("#testcontent").is(":visible")) {
$("#testcontent").slideUp("slow");
}
else {
$("#testcontent").slideDown("slow");
}
});
});
You want to use this collapsible DIV jQuery plugin written by John Snyder. It does exactly what you are looking for.
I use this on my blog you can see an example of it here and here
Sample HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="/stylesheet.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.collapsible.js"></script>
<div class='collapsible'>
Header Text 1<span></span>
</div>
<div class='container'>
<div class='content'>
<div>
Body Text 1
</div>
</div>
</div>
<div class='collapsible'>
Header Text 2<span></span>
</div>
<div class='container'>
<div class='content'>
<div>
Body Text 2
</div>
</div>
</div>
</html>
CSS to go along with it
/* START SECTION FOR COLLAPSEIBLE DIV */
.collapse-open {
/* background:#000;
color: #fff;*/
}
.collapse-open span {
display:block;
float:left;
padding:10px;
background:url(/images/minus.png) center center no-repeat;
}
.collapse-close span {
display:block;
float:left;
background:url(/images/plus.png) center center no-repeat;
padding:10px;
}

Change background image of anchor <a> tag after expanding it + CSS

So, What basically I am trying is after clicking on <a> anchor tag I want to change the background of it.
Example : See image below
After clicking on this link I am generating (expanding) one div tag exactly below to it and displaying the polices on it.
I want to expand arrow turn when expanding/collapsing like :
See Image below: Image Name: (black_t_arrow.gif)
So that It will display image down arrow image when policies link is collapsed and again vice versa after clicking on Policies link it should hide that down arrow image with original one means it should return to the previous state.
Following is my CSS code:
.expended_div{ float:left; width:100%; padding:10px 0}
.expended_div a{ color:#000; font-size:11px; text-decoration:underline; margin-left:15px; font-weight: bold; background-image: url("/common/images/black_t_arrow.gif");
background-position: 0 2px;
background-repeat: no-repeat; padding-left: 9px;}
.expended_div a:hover{ text-decoration:underline}
.expand_collapse{ float:left; padding:10px 20px; }
Following is HTML code:
<p class="expended_div open">Policies</p>
<div class="expand_collapse" style="display:none;">
<p><?php
//some php code
}
?></p>
</div>
How can I achieve this using CSS?
Thanks in advance.
You need two CSS classes, one for the collapse and one for the expanded.
HTML:
<a id="expander" class="close" href="#">Click to collapse/expand</a>
CSS:
.close { background-image: url("/images/collapsed.gif"); }
.open { background-image: url("/images/expanded.gif"); }
JavaScript:
/* Useful for multiple CSS classes. */
$('a#expander').click(function(e){
e.preventDefault();
var exp = $(this);
if (exp.hasClass('open')) {
exp.removeClass('open').addClass('close');
} else {
exp.removeClass('close').addClass('open');
}
});
OR:
CSS:
a#expander { background-image: url("/images/collapsed.gif"); } /* set default image */
.open { background-images: url("/images/expanded.gif"); }
JavaScript:
/* Swap in/out the class open to override the default background. */
$('a#expander').toggleClass('open');
I assume you have a javascript onclick (or similar) to toggle the style for the menu item to expand it. If you have an ID on the menu items then in the JS that's triggered I would use a test for open/close status and over-ride or reset the CSS items as needed
document.getElementById("menuItem").style.backgroundImage = "url(black_t_arrow.gif)";
This seems like a job for CSS sprites, as laid out here. My jsFiddle for the solution is here.
The basic idea is to create a single image that contains both arrows. Since you're using this image as a background, only the part of the image that fills up your <a> tag content will display. To change between one image and the other, all you need to do is change the css background-position property.
Inside your DOM-ready function:
$(".expended_div a").on("click", function() {
if(this.css("background-position") == "0px -8px")
this.css("background-position", "0px -31px");
else
this.css("background-position", "0px -8px");
});
For this to work, change "black_t_arrow.gif" to look like this:
The cool thing about this is that there's no loading time for the second image. It's already there, but hidden from view because the background image is larger than the content area.
I don't know about css but if you are using the jquery ui framework then following link will help you
http://jqueryui.com/accordion/
u will have to use following property
$( "#accordion" ).accordion({ collapsible: true });
try following Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion({ collapsible: true });
});
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Welcome</p>
</div>
<h3>Section 2</h3>
<div>
<p>Hi</p>
</div>
<h3>Section 3</h3>
<div>
<p>Hello</p>
</div>
<h3>Section 4</h3>
<div>
<p>How are you?</p>
<p>Have a nice day.</p>
</div>
</div>
</body>
</html>
Aslo check the documentation for the 'Accordian' at http://api.jqueryui.com/accordion/

Change image on mouseover for a button on another div

On the "home" page I want to have a logotype and a menu on a #banner div (which will then be there throughout the whole site) and on a #content" div to have an image. All these divs are inside a #container" div. The menu has 3 buttons.
I would like that on mouseover event each button displayed image on the #content div changes accordingly. So basically, when hover button1, the image on #content will change from background.jpg to background1.jpg. The event of mouseover on button2 will change it to background2.jpg etc. When buttons are not hovered over, the image should revert to the original background.jpg.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>E.S.T.</title>
<link href="_css/layout.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
<div id="logo">E.S.T.</div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1">Biography</li>
<li id="button2">Albums</li>
<li id="button3">Links</li>
</ul>
</div>
</div>
<div id="content">
<img id="back0" src="_img/background.jpg">
<img id="back1" src="_img/back_bio.jpg">
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1,
{
imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"
});
</script>
</body>
</html>
CSS:
#charset "UTF-8";
#import url("../_fonts/Days/fontstylesheet.css");
body {
background-color:#CCC;
font-family:Days;
font-size:100%;
}
#container {
width:850px;
max-height: 650px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
font-family: Days;
}
#logo {
position:relative;
font-size: 4em;
color:white;
float:left;
}
#menu {
float:right;
margin-top:40px;
}
I have tried several different things but I manage only to change the background image from the buttons themselves. From searching around the web i think this should be done with JS, but i have no idea how to do it.
This can be solved entirely with CSS, but first let me give you a tip:
Combine background.jpg and background1.jpg into one image, and rather change the background position. This way, there won't be any delay from when the user hovers over the menu element to when the picture is displayed, and you'll have fewer files to keep track of.
Say we let #button1 be 100px tall. We make an image 200px tall containing the normal state image on top, and the hover image on the bottom. This is called a sprite.
#button1 {
height: 100px;
background-image: url("background.jpg");
}
#button1:hover {
background-position: 0 -100px;
}
This moves the background image, showing the hover version.
For convenience, I'll answer this question using the jQuery javascript library.
If I understand you right, you would like #content to contain an image that changes when you hover over the menu items, and the image should reflect the item currently hovered.
In stead of including every image in the body, I'll try an approach using the data attributes.
HTML The relevant parts
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1" data-img="background.jpg">Biography</li>
<li id="button2" data-img="back_album.jpg">Albums</li>
<li id="button3">Links</li>
</ul>
<div id="content">
<img id="back"
src="_img/background.jpg"
data-original="_img/background.jpg"
alt="e.s.t" />
</div>
JavaScript
$(document).ready(function() {
$("#MenuBar1 li").mouseover(function() {
$("#back").attr("src", $(this).data("img"));
}).mouseout(function() {
$("#back").attr("src", $("#back").data("original"));
});
});​
So now we store the original image path with the image tag in its data-original attribute, and the path to the :hover image is stored with the menu element.
See this Fiddle for a demo!
Give an id on your image like: id=idimage
You can use jQuery like this:
<script type="text/javascript">
$(document).ready(function(){
$("#MenuBar1 li").mouseover(function(){
var id=$(this).attr('id');
var number = id[id.length-1];
$("#id_image").attr("src","_img/background"+number+".jpg");
});
});
</script>

Categories

Resources