I am using the following Flip JQuery plugin:
http://lab.smashup.it/flip/
I was able to get it to work but there are issues with using it on my site. How can I create something from scratch where on click of a button i can flip a div and then on clicking another it can revert to the old state.
Below is what I had using Flip but need to start from scratch.
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="real_thing" id="flipbox">
<a href="#" id="email_flip">
<div class="button1">
<span class="line_text">
Button 1
</span>
</div>
</a>
<div class="button2">
<span class="line_text">
Button 2
</span>
</div>
<div class="button3">
<span class="line_text">
Button 3
</span>
</div>
</div>
Flip
Revert
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<script type="text/javascript">
$("#clicker2").click(function(){
$("#flipbox").revertFlip();
});
</script>
<script type="text/javascript">
function flip() {
$("#email_flip").click(function()
{
$("#flipbox").flip({
direction: 'tb',
content: '<input type="text" placeholder="Email"> <input type="text" placeholder="Password">',
})
}
)
}
$(document).ready(function() {
$("#flipbox").on("focus", function(){flip();});
flip();
});
</script>
</body>
</html>
Related
Here is my code: When I click on one button, it hide all links. And show on one button also. Links and titles are lists which change their lengths in python. I want to show the link of only button which is clicked not all. I have also tried using div but also same problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Python Jobs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
<section class="hero is-dark is-bold">
<div class="hero-body">
<p class="title">
Job Title
</p>
<p class="subtitle">
Python jobs
</p>
</div>
</section>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("a").hide();
});
$("#show").click(function(){
$("a").show();
});
})
</script>
</head>
<body>
<section class="section">
<div class="container">
{% for i in range(0, len-1) %}
<h3>{{i+1}}. {{title[i]}}</h3>
<a href={{links[i]}}>{{links[i]}}</a>
<button id="show">Show</button>
<button id="hide"> Hide</button>
<br>
{% endfor %}
</div>
</section>
</body>
</html>
There are multiple problem in your code.
id must be unique so use class instead of id.
Wrap your each heading and link with container. In your case move your div inside for loop.
Based upon your button click find your heading and link to show / hide.
Initially hide your heading and link (It's depend upon your logic, how you want to present UI)
Example:
$(".hide").click(function() {
$(this).parent('div').find('a ,h3').hide();
});
$(".show").click(function() {
$(this).parent('div').find('a ,h3').show();
});
a,
h3 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h3>Title1</h3>
Link1
<button class="show">Show</button>
<button class="hide"> Hide</button>
</div>
<div class="container">
<h3>Title2</h3>
Link2
<button class="show">Show</button>
<button class="hide"> Hide</button>
</div>
I am using feather icons in a vanilla js project. When I am declaring the script feather.replace() inside the html body, the icons are coming correctly. However, I am creating certain div dynamically in JS. The icons aren't showing up inside those divs.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
</head>
<body>
<div class="wrapper>
</div>
<script>
feather.replace()
</script>
<script src="./js/script.js"></script>
</body>
</html>
My js function:
let newInputWrapper = document.getElementById("wrapper");
newInputWrapper.innerHTML += `
<div class="input-wrapper">
<div class="input-box">
<input type="text" class="input">
<div class="input-icon font-color" id="${newAddID}" onClick="onAddNewCategory(this.id)">
<i data-feather="plus"></i>
</div>
<div class="input-icon font-color" id="${newdeleteID}" onClick="onRemoveNewCategory(this.id)">
<i data-feather="trash"></i>
</div>
<div class="input-icon font-color">
<i data-feather="chevron-right"></i>
</div>
</div>
</div>
`
You need to call feather.replace() at the end of body to parse any dynamically-added element.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
</head>
<body>
<div class="wrapper>
</div>
<script src="./js/script.js"></script>
<script>
feather.replace()
</script>
</body>
</html>
The onclick-function of the <button> in the following code is not working.
I want to show a SAVE button when the editable area is clicked. Then the button's onclick function should display an alert but this is not working.
.views-submit-button {
visibility: hidden;
}
.views-exposed-widget:focus-within+.views-submit-button {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="views-exposed-widget">
<div contenteditable id="editable-text-name">
Editable text here.
</div>
</div>
<div class="views-submit-button">
<button id="save-button" type="button" onclick="alert('button clicked.')" class="btn btn-outline-dark">Save</button>
</div>
</div>
</body>
</html>
in your implementation css hides the button before the actual click happens
here's JS solution that hides button after alert triggered or by timeout when your contenteditable loses its focus
alternatively you can use opacity instead of visibility in css so it will remain clickable but this feels hacky, someone could click that accidentally so I would not recommend
.views-submit-button {
visibility: hidden;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="views-exposed-widget">
<div tabindex="1" contenteditable id="editable-text-name" onfocusin="document.getElementById('save-button').style.visibility = 'visible'" onfocusout="setTimeout(function(){document.getElementById('save-button').style.visibility = 'hidden'}, 100)">
Editable text here.
</div>
</div>
<div class="views-submit-button">
<button id="save-button" type="button" onclick="alert('button clicked.');this.style.visibility = 'hidden';" class="btn btn-outline-dark">Save</button>
</div>
</div>
Try using the below code and add input event to your contenteditable element
$(document).ready(function() {
var isEditClicked = false;
document.getElementById("editable-text-name").addEventListener("input", function() {
$(".views-submit-button").css("visibility", "visible");
}, false);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title></title>
<style>
.views-submit-button {
visibility: hidden;
}
.views-exposed-widget:focus-within+.views-submit-button {
visibility: visible;
}
</style>
</head>
<body>
<div class="container">
<div class="views-exposed-widget">
<div contenteditable id="editable-text-name">
Editable text here.
</div>
</div>
<div class="views-submit-button">
<button id="save-button" type="button" onclick="alert('button clicked.')" class="btn btn-outline-dark">Save</button>
</div>
</div>
</body>
</html>
I have changed the CSS. You need to change the CSS as per your requirements. But this is the way which you can follow to meet your needs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title></title>
<style>
.button {
display: none;
}
input:hover + .button, .button:hover {
display: inline-block;
}
</style>
</head>
<body>
<div class="small-4 columns">
<input type="text" value="Hi" />
<button class="button" onclick="alert('Hello');">Click Me</button>
</div>
</body>
</html>
The button is hidden that's why you don't see him. In your style change .views-submit-button to visible and button appears. In your wrapper div class name is .views-submit-button so that's why button is hidden by default.
.views-submit-button {
visibility: hidden;
}
You can use toggle method to manipulate button's visibility after click
The css execute first. you may use javascript to control it
I hope to click "Upload Files" lable to display a foreground windows which include extra content, Submit and Close buttons in a html web page.
I write the following code, but it's ugly, and orginal UI is damaged when the is shown.
Is there a good way to do that? or a good control can do that?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WiFi File Transfer</title>
<meta charset="utf-8" />
<script src="js/jquery1.10.2.min.js?isassets=1" type="text/javascript"></script>
<script src="js/user.js?isassets=1" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#UploadWindows").hide();
$("#UploadFile").click(function() {
$("#UploadWindows").show();
});
$("#Close").click(function() {
$("#UploadWindows").hide();
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<a href="#">
<span id="UploadFile">Upload Files</span>
</a>
</div>
<div id="UploadWindows">
<form action="" method="post" enctype="multipart/form-data">
Please select files to upload <br />
<input type="file" name="myupload" multiple="multiple" />
<br />
<input type="submit" value="Upload Files" />
<br />
<span id="Close">Close</span>
</form>
</div>
<div id="Div1">
Other Content!
</div>
</div>
</body>
</html>
BTW, I think the edit popup window of stackoverflow is very good, I don't know if there is simple way do to it.
I'm a newbie in Jquery. I'm trying to print text on a document dynamically. I have a JavaScript function that is supposed to display images using the jQuery prettyphoto plugin. My function does not show the images but when I paste the code on a html file it works fine. Please help. A sample of my code is here.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./index.css" type="text/css">
<script type="text/javascript" charset="utf-8" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="spin.min.js"></script>
<script type="text/javascript" charset="utf-8" src="custom-functions.js"></script>
<link rel="stylesheet" href="./prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="./prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_related-content-images']").prettyPhoto({theme:'facebook'});
});
function showImages()
{
var stringData = '';
stringData = stringData + '<div id="related-content-images" >Related to this: <br/>'+
'<img id="not-hidden" src="images/sample-album-2.jpg" alt="" title="">'+
'<img id="related-images" src="images/sample-album-3.jpg" alt="" title="">'+
'<img id="related-images" src="images/sample-album-4.jpg" alt="" title=""></div>';
document.getElementById("content").innerHTML=''+stringData+'';
}
</script>
</head>
<body>
<div id="header"><div id="app-logo-image">
<img src="images/app-logo.png" id="app-logo"/></div>
<div id="header-form">
<input type="search" id="search-text-box" name="search-text-box" placeholder="Search">
<input type="submit" id="search-button" name="" value="Search">
</div>
</div>
<div id="container">
<div id="sub-header-menu">
<div id="music-albums">
<img src="images/music-albums-icon.png" id="music-albums-image"; onclick="fetch('music-albums');"/></div>
<div id="genres-icon">
<img src="images/genres-icon.png" id="genres-icon-image"onclick="fetch('music-genres');"/></div>
<div id="artist-icon">
<img src="images/artists-icon.png" id="artist-icon-image"onclick="fetch('music-artists');"/></div>
<div id="home-icon">
<img src="images/home-button.png" id="home-icon-image"/></div>
</div>
<div id="content" style="left:0%;">
click me
</div>
</div>
</body>
</html>
Your showImages function isn't executed until the link is clicked, however the prettyPhoto initialisation is only run once when the document finishes loading, and since showImages hasn't been run yet prettyPhotos can't find and enhance those images.
If you add this to the end of showImages everything should work:
$('#content a').prettyPhoto({theme:'facebook'});