i have a strange ios safari issue - i can reproduce the problem in phonegap and the ios browser too:
when you click outside the area of an A tag is has the same effect as actually clicking the tag.
it does not matter if the tag has just an HREF or a click handler.
you can find the code here: http://jsfiddle.net/ygaeb0r5/
also below.
<style>
* {
border: 0;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
outline: none;
text-decoration: none;
color: #000000;
display: inline-block;
background-color: green;
}
img {
border: none;
}
span {
background-color: yellow;
padding: 6px;
display: inline-block;
}
</style>
<title>Template App</title>
</head>
<body>
<div>top
<br />
<br />
<br />
<br />
<span>click here</span>
</div>
<a></a>
<a id="a" href="#/chat/name-0">
name 0 <br>description 0
</a>
<br />
<a id="b" href="#/chat/name-1">
name 1 <br>description 1
</a>
<script type="text/javascript">
var a = document.getElementById("a");
a.addEventListener("click", function() { alert("a clicked"); });
var b = document.getElementById("b");
b.addEventListener("click", function() { alert("b clicked"); });
</script>
</body>
i have also attached a screen shot where i marked in blue the approximative area which when clicked triggers the click for #a or #b - it even includes the bottom half of "click here".
i can also reproduce is on the actual device, but it is easier in the simulator - since you can click more precise using the mouse.
Related
I have an iFrame in HTML code, and I created a script tag that I set on a submit button. I want the iFrame to be visible when I click on the submit button, but that is not working. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
#outerdiv
{
border:none;
width:100%;
height:500px;
overflow:hidden;
}
#innerIframe
{
border: none;
position:relative;
top:-190px;
width:100%;
height:900px;
}
</style>
</head>
<body>
<h2>Web Service</h2>
<script type="text/javascript">
function showIFrame() {
var iframe = document.getElementById("innerIframe");
iframe.style.visibility="visible";
}
</script>
<form class="example" method="post" style="margin:auto;max-width:500px">
<input type="text" placeholder="Search query" name="search2">
<button type="submit" name="submit" onclick="showIFrame()"><i class="fa fa-search"></i></button>
</form>
<br>
<div id="outerdiv" >
<iframe src={{results}} id="innerIframe" style="visibility: hidden;" scrolling="yes"></iframe>
</div>
</body>
</html>
{{results}} is the URL that is passed by the user in python Flask. So in the form the user types in a word, which then joins it to a URL and performs a search. The search works perfectly, but when the page is loaded on startup, it shows Not Found, the requested URL has not been found... and I understand why that happens as the URL hasn't been loaded yet. So I want to make the iFrame invisible, and once the submit button is pressed, the frame can be visible.
I have tried with jQuery as well, but it did not work.
All help and advice will be highly appreciated.
First pass "event" when you call the onClick function in your HTML code like this *onclick="showIFrame(event)
Then in your function, you accept the "event" as a parameter like this *function showIFrame(event) {
A click button most times trigers your page to refresh, so you have to stop that by preventing the default action. Add "event.preventDefault()" to your function like this *event.preventDefault()
I want to remove pop-up option from this script while printing the content of textarea so the print page will be in same page of the textarea because i added css so the printed page wont have link or the date "#page { size: auto; margin: 0mm; }" but when it pop-up in seperate page it shows link and date
<html >
<head>
<title></title>
<!-- script print button -->
<script type="text/javascript">
function printTextArea() {
childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.open();
childWindow.document.write('<html><head></head><body dir="rtl">');
childWindow.document.write(document.getElementById('targetTextArea').value.replace(/\n/gi,'<br/>'));
childWindow.document.write('</body></html>');
childWindow.print();
childWindow.document.close();
childWindow.close();
}
</script>
<style type="text/css">
#page { size: auto; margin: 0mm; }
textarea {
direction: rtl;
background-color: white;
font-size: 1em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #00acee;
resize: none;
}
input[type=button] {
background-color: #00acee;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<p>
<TEXTAREA name="thetext" rows="20" cols="80"id="targetTextArea" placeholder="قم بنسخ و لصق الطلب لملأه و التعديل عليه و طباعته بالزر أسفله ......"></TEXTAREA>
</p>
<!-- print button -->
<center> <input type="button" onclick="printTextArea()" value="طباعة"/></center>
</body>
</html>
This is happening because you are opening a new Window inside printTextArea().
When opening a window with the window.open() method, you can use this property from the destination window to return details of the source (parent) window.
You can read more about it here at w3schools. W3School Window Opener
function printTextArea() {
childWindow = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
childWindow.document.open();
childWindow.document.write('<html><head></head><body dir="rtl">');
childWindow.document.write(document.getElementById('targetTextArea').value.replace(/\n/gi,'<br/>'));
childWindow.document.write('</body></html>');
childWindow.print();
childWindow.document.close();
childWindow.close();
}
In stead of opening the new window, you should be selecting your textarea by id and updating it's html using .innerHTML. Ex:
document.getElementById("demo").innerHTML = "Paragraph changed!";
Good Evening Stackoverflow!
So I am running into an issue in which I am trying to create a notes app using javascript and I wanted to play around with localStorage. I have tried a couple of options but I can't seem to select all and then copy to the clipboard the localStorage, has anyone else ran accross this before?
<!DOCTYPE html>
<html>
<head>
<title>NotePad</title>
<style>
body {
font-family: Tahoma;
line-height: 1.6em;
background: #f4f4f4;
}
header, footer {
text-align: center;
}
#container {
width: 400px;
margin: 50px auto;
background: #FFFFa5;
overflow:hidden;
padding: 30px;
}
.clear {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
.copy {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
</style>
<script>
function getNote(){
if(localStorage.getItem('note')){
var note = localStorage.getItem('note');
} else {
var note = 'Go ahead and edit this note to save in local storage';
}
document.getElementById('note').innerHTML = note;
}
function saveNote(id){
var note = document.getElementById('note').innerHTML;
localStorage.setItem('note', note);
}
function clearNote(){
clear: localStorage.clear();
return false;
}
function copyNote(){
$("#note").select();
document.execCommand("copy");
return false;
}
</script>
</head>
<body>
<header>
<h1>My Notes!</h1>
</header>
<section id="container">
<div id="note" contenteditable="true" onkeyup='saveNote(this.id)'></div>
</section>
<footer>
<div>
Clear Note
</div>
<br>
<div>
Copy
</div>
<p>MyNote © 2017</p>
</footer>
<script>
getNote();
</script>
</body>
</html>
The select method does not select text. It fires the select event on that element (pretends the user selected that element themself), and since you have no event handlers for the select element, nothing happens. This question should help you create a function that selects your text.
I'm trying to create a selectable list that when you click on an item, it displays an input field that you can use to edit the description but until the item is clicked on, the input field is hidden.
However, when I select an item and then click on the input field, it unselects the item and the input field is hidden again.
I've recreated the issue here with just one list item. How can I allow for the user to click in the input field without triggering the jQuery function?
Also, the user will be able to click multiple items in the list so I've updated the jsbin with a second item.
If you don't want to change the html arrangement of the input , you can prevent the event propagation on click of the input element to its parent which in turn will avoid any class toggle.
The only addition you need is this.
$('.fund input').click(function(e) {
e.stopPropagation();
});
Here is the working sample
$('.fund').click(function() {
$(this).toggleClass('selected');
});
$('.fund input').click(function(e) {
e.stopPropagation();
});
* {
font-family: 'Lato', sans-serif;
}
.fund {
background-color: #fff;
width: 500px;
border: 1px solid #444;
height: 50px;
padding: 0 10px;
border-radius: 3px;
}
.fund:hover {
background-color: #efefef;
cursor: pointer;
}
.fund .description,
.fund .alt-description {
width: 50%;
float: left;
}
.fund .description {
line-height: 50px;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 700;
color: #555;
}
.fund .alt-description {
visibility: hidden;
line-height: 50px;
font-size: 14px;
}
.fund .alt-description input {
height: 30px;
font-size: 12px;
}
.fund.selected {
border: 1px solid #00cc00;
}
.fund.selected .description {
color: #00cc00;
}
.fund.selected .alt-description {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[be able to click in input but don't toggle div]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class='fund'>
<div class='description'>
Fund Name
</div>
<div class='alt-description'>
Description:
<input type='text' value='Fund Name'>
</div>
</div>
</body>
</html>
This will do the trick:
$('.fund').click(function() {
$('.fund').removeClass('selected');
$(this).addClass('selected');
});
The issue is that you have alt-description within fund, so anytime you click on "fund" it will toggle the show hide of your alt-description input. Move the alt-description out of the fund class. Otherwise make the trigger description instead of fund.
<div class='fund'>
<div class='description1'>
Fund Name
</div>
</div>
<div class='alt-description1'>
Description: <input type='text' value='Fund Name'>
</div>
Here I change the javascript a little.
$('.fund').click(function() {
if(!$(this).hasClass('selected')){
$(this).toggleClass('selected');
}
});
So when ever the div with the .fund class has a class selected don't toggle the class.
I'm been having a lot of trouble figuring out a way to update the text in a section without having to reload the page. What I would like the code to do is update the text and a picture in a section (id="section2" below) when you click on one of the tabs.
What I want the page to do when you click on one of the tabs is to load text (and in the future a .jpg too) from a local .txt file. As of right now, the changeText function updates the text but only when you manually type in the text.
From my code below this works:
$('#section-text').html("test of text1");
but what I would like to do would be to load text in from a .txt file called "text1.txt"
$('#section-text').html("text1.txt");
I'm just starting to venture into the web programming so I have very little experience with JavaScript and JQuery so most of the stuff that I've shown below is trial and error from other sites. I've tried many other methods that I've found online but with very little success. So far this is the closest I've got to my ideal solution, but I find if I just copy and paste my text it loses formatting.
Any help would be greatly appreciated. And if people have any suggestions on cleaning up some of the code it would also be very welcome.
Here is my HTML:
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Test Page">
<title>Test Page</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function changeText(text){
if (text == 'Example 1'){
$('#section-text').html("test of text1");
$('#section-pic').html("images/slide1.jpg");
}
if (text == 'Example 2'){
$('#section-text').html("Change the text");
$('#section-pic').html("images/slide2.jpg");
}
if (text == 'Example 3'){
$('#section-text').html("Something new here");
$('#section-pic').html("images/slide3.jpg");
}
}
</script>
</head>
<div class="nav">
<link rel="stylesheet" href="css/styles.css">
<ul>
<li id="Example 1" onClick="changeText('Example 1');"><a>Example 1</a></li>
<li id="Example 2" onClick="changeText('Example 2');"><a>Example 2</a></li>
<li id="Example 3" onClick="changeText('Example 3');"><a>Example 3</a></li>
</ul>
</div>
<div id="section2" class="section2" align="center">
<div id="section-text" class="section-text">
<iframe src="des/text1.txt" style="overflow:hidden" width ="90%"; height="90%" seamless="seamless" scrolling="no" frameBorder="0"></iframe>
</div>
<div id="section-pic" class="section-pic">
<span class="Centerer"></span>
<img class="Centered" src="images/slide1.jpg" style="height:75%; width:90%"/>
</div>
</div>
</html>
The CSS:
<style>
#header {
background-color:#083266;
color:white;
text-align:center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
#section2 {
width:100%;
background-color:grey;
padding-top:25px;
padding-bottom:25px;
height: 10cm;
}
.section-text {
width:60%;
float:right;
background-color:grey;
padding-top:25px;
padding-bottom:25px;
text-align:center;
}
.section-pic {
background-color:grey;
width: 40%;
float:left;
text-align:center;
}
.Centerer {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Centered {
display: inline-block;
vertical-align: middle;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 10px;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
width = 100px
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
</style>
AJAX attempt:
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');
function loadFile() {
reader.open('GET', 'text1.txt', true);
reader.onreadystatechange = displayContents;
reader.send(null);
}
function displayContents() {
if(reader.readyState==4) {
var el = document.getElementById('page_content');
el.innerHTML = reader.responseText;
}
}
UPDATED - My Solution:
For those of you who run into the same problem as I did here is the solution I used. After a lot of searching and asking around I used the display option in my css file. So add the following to your css file:
.hidden { display: none; }
.unhidden { display: block; }
In my case I wanted to update some text and a picture with a click on each tab so I added the following script to my html:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function unhide(divID,divID2) {
$(".unhidden").each(function() {
$(this).removeClass("unhidden").addClass("hidden");
});
//change text
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
//change the images
var item = document.getElementById(divID2);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
and here is the html script that I used:
<div class="section2" align="center">
<div class="nav">
<link rel="stylesheet" href="css/styles.css">
<ul>
<li> Example 1 </li>
<li> Example 2 </li>
</ul>
</div>
<div class="section-text">
<div id="Text1" class="unhidden">
<p> Text for Example 1 </p>
</div>
<div id="Text2" class="hidden">
<p> Add your text here for Text 2 </p>
</div>
</div>
<div class="section-pic">
<div id="Pic1" class="unhidden">
<span class="Centerer"></span>
<img class="Centered" src="images/pic1.jpg" style="height:auto; width:auto"/>
</div>
<div id="Pic2" class="hidden">
<span class="Centerer"></span>
<img class="Centered" src="images/pic2.jpg" style="height:auto; width:auto"/>
</div>
</div>
</div>
There are bunch of things you would need to do. Following is a mockup that would help you understand how you can get the text from an external file. Since you are more looking at a configuration approach, I would recomment using an xml file instead of text ( but the choice is upto you ).
// Register click event for every 'li' element
$('li').click(function()
{
var response = '';
// grab the id of the 'li' for lookup
var value = $(this).attr("id");
$.ajax({
url: "https://url/xml/test.xml", // Check for the structure below
dataType: "xml",
success: function(data) {
xmlDoc = $.parseXML(data);
$(xmlDoc).find("id").each(function ()
{
if($(this).text() == value)
{
$("#section-text").text($(this).find("title").text());
$(".Centered").attr("src",$(this).find("title").text());
}
});
}
});
});
// structure of text file as xml
"<id>Example1<title>Text Of Example 1</title><img>images/example1Image.img</img></id><id>Example2<title>Text Of Example 2</title><img>images/example2Image.img</img></id>",
http://jsfiddle.net/gcfLso5s/4/
I would also recommend reading some articles on jquery and ajax to enhance the understanding on how it works.
Let me know if you got any questions.
You can load a text file Via AJAX request and can set the text.where ever you want to.