I'm new to XDK, and I'm trying to figure out how to make a button navigate to a random page out of a set group of pages. Is this a Javascript Math.random thing, and if so, how do I apply it to a button in XDK? Any help or pointing to a resource would be helpful! Thanks!
Update: So I've decided to instead have the button generate a random div on a new page. Here's the javascript:
window.onload=function() {
var E = document.getElementsByClassName("item");
var m = E.length;
var n = parseInt(Math.random()*m);
for (var i=m-1;i>=0;i--) {
var e = E[i];
e.style.display='none';
}
E[n].style.display='';
}
And here's the html on the new page:
<body>
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
<div class="item">Five</div>
<div class="item">Six</div>
</body>
The initial load randomizes the div, but the when i go back to the main page and click the button again, it doesn't randomize again. I know the problem is the window.onload, but I'm not sure how to fix it. How do I get the button to reload the array?
Related
I need to display the current time when I click the button each time, I've achieved the DOM of creating new divs when clicked on button, but I'm not getting the time inside span.
HTML
<button onClick="createDiv()">Record Time</button>
<div id="getText" style="display: none;">
<span id="showTime"></span>
</div>
Script
function createDiv()
{
let div = document.createElement('div');
document.body.appendChild(div);
var now = moment().format("h:mm:ss A");
$('#showTime').append(now);
}
As the code above, current time should be displayed on each new div.
I believe you are using jquery in your script, if so simply replace the
line: $('#showTime').append(now);
with: $('#showTime').text(now);
with vanilla JS you can also do this:
function createDiv(){
let div = document.createElement('div');
document.body.appendChild(div);
var now = moment().format("h:mm:ss A");
let timeNow = document.createTextNode(now);
$('#showTime').append(timeNow);
}
I have unordered list of links. Using JQuery, when clicked, the link's contents (a div with image and text) are loaded into the section specified. This all works beautifully. But I'm wondering how to also get the onclick function to move the view to the div's location on the page similarly to how anchor tag works. Here is the site where you can see the div being populated, but not moving down to view it. https://www.thecompassconcerts.com/artists.php
My JQuery knowledge is not awesome (I'm being generous).
I followed Osama's suggestion to add event listener and I got almost correct results. Upon first click...contents are loaded but do not move. But on every successive click, it functions perfectly: Contents loaded and move to div (like an anchor link) works! BUT...not on Safari or Mobile Safari.
Here is my jQuery. I assume if first click is not working that I must add listener before the first click?? Can the event listeners be added on page load BEFORE the function to prevent default click, etc.?
<script>
// BEGIN FUNCTION TO CAPTURE AND INSERT CONTENT
$(document).ready(function () {
// PREVENT DEFAULT LINK ACTION
$('.bio').click(function (e) {
e.preventDefault();
// ADD LISTENER TO EACH ITEM BY CLASS
var list = document.getElementsByClassName("bio");
for (let i = 0; i < list.length; i++) {
list[i].onclick = moveToDiv;
}
// FUNCTION TO MOVE TO LOCATION
function moveToDiv() {
document.location = "#performbio";
}
// STORE the page contents
var link = $(this).attr("href");
// load the contents into #performbio div
$('#performbio').load(link);
});
});
</script>
Here is the HTML with links in unordered list
<!-- CONTRIBUTING ARTISTS LIST AND BIOS -->
<section id="artists">
<h2>Contributing Artists</h2>
<ul class="cols">
<li><a class="bio" href="performers/first-last.html">First Last</a></li>
<li><a class="bio" href="performers/first-last.html">First Last</a></li>
<li><a class="bio" href="performers/first-last.html">First Last</a></li>
</ul>
</section>
Here is HTML of Section where code is being inserted by function
<!-- Performer Bios Dynamically updated -->
<section id="performbio">
</section>
Here is div contents that are being inserted
<div class="artistbio">
<p class="artistname">First Last</p>
<img class="artistimg" src="performers/img/name.jpg">
<p>lots of text here</p>
</div>
If I understand it right, you want to scroll to the section where the details appear on clicking any item in the list but through js and not HTML. In that case, you would add an onclick listener on to the list elements like so:
listElement.onclick = moveToDiv;
The function:
function moveToDiv() {
document.location = "#performbio";
}
A simple way to add a listener to all of the elements:
var list = document.getElementsByClassName("bio");
for (let i = 0; i < list.length; i++) {
list[i].onclick = moveToDiv;
}
For the edited post, you need to move the function definition out of the document.ready function. you would change the script to:
// FUNCTION TO MOVE TO LOCATION
function moveToDiv() {
document.location = "#performbio";
}
$(document).ready(function () {
// PREVENT DEFAULT LINK ACTION
$('.bio').click(function (e) {
e.preventDefault();
// ADD LISTENER TO EACH ITEM BY CLASS
var list = document.getElementsByClassName("bio");
for (let i = 0; i < list.length; i++) {
list[i].onclick = moveToDiv;
}
// STORE the page contents
var link = $(this).attr("href");
// load the contents into #performbio div
$('#performbio').load(link);
});
});
Another Solution: Using scrollIntoView
First, get all the elements into a variable using querySelectorAll
var elements = document.querySelectorAll(".bio");
Then create a function, for the scrolling part:
function scroll(element) {
element.scrollIntoView();
}
Then just add the onclick listener:
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function() {
scroll(elements[i]);
});
}
I found it very frustrating to try to accomplish these two tasks so instead of a jQuery solution I opted for a CSS solution.
I populated my DIV with all the php includes, gave them unique id's for the anchors to work and then used CSS to hide them by default until clicked and it works like a charm....shows only what I need to show and goes there like an anchor is supposed to.
I must thank Ghost for all of your help and efforts to try and solve this via jQuery. You were very kind and generous.
Here is the code I used:
My collection of links.
<li><a class="bio" href="#artist-name1">Name 1</a></li>
<li><a class="bio" href="#artist-name2">Name 2</a></li>
which anchors to these divs
<div class="bio-container" id="artist-name1">
<?php include('performers/name-lastname.html'); ?>
</div>
<div class="bio-container" id="artist-name2">
<?php include('performers/name-lastname.html'); ?>
</div>
Then I use this CSS to hide those divs until the anchors are clicked.
I'm using [id*="artist-"] to target only links with such text...very easy. Not ideal for a massive list...but mine is not so large so it will do for this situation.
[id*="artist-"] {display: none;}
[id*="artist-"]:target {display: block;}
I'm building a simple webpage.
I wanna select the text inside a <div> and then open a new tab in the same browser and do a Google search for that text with the click of a button. Right now, I just have the solution to copy to clipboard with a button click. Is there any workaround for this...?
I'm OK with using either Google Chrome or Firefox as it's just for a local project. Not meant for public hosting.
UPDATE : I actually need to copy text which is rendered by other HTML code inside the div. I don't wanna copy the code inside the div also.
For reference, here is a code snippet that I used to make my copy to clipboard function.
JavaScript:
function CopyToClipboard(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
alert("Copied the text. Use Ctrl+V to paste on Google")
}
}
HTML:
<div class="search" id="div1">
<!--Text to search for (here, CEO of Google)-->
<span>CEO of Google</span>
</div>
<button id="button1" class="button" onclick="CopyToClipboard('div1')">Copy question</button>
This code selects just the text inside the div and then copies it. I don't wanna search for the rest of the code....
Try with the code below.
You can find out more information about how to redirect from your page here.
<html>
<body>
<div id="search_this">New text</div>
<button type="button" onclick="myButtonOnClick()">Search!</button>
</body>
<script>
function myButtonOnClick(){
let url = "https://www.google.com/search?q=";
let searchText = document.getElementById("search_this").innerHTML;
debugger;
window.open(url + searchText);
}
</script>
</html>
This code does the job:
function searchMe() {
var stringQuery = document.getElementById('text_div').innerHTML;
var query = "https://www.google.com/search?q=" + stringQuery.split(' ').join('+');
window.open(query);
}
<div id="text_div" onClick="searchMe();">
Kittens
</div>
Note: Does not work here on stackoverflow but I've tested it in a custom html file and it works.
OK I've got a workaround. Hope it helps someone else with the same problem. A special thanks to both #Daan Seuntjens and #Alex Dragnea for sharing answers as I have used their basic method.
Here, I've selected the text in the <div> and stored it int the range variable which was used earlier for the copy to clipboard function. And then, I did I used another variable query just like both the answers earlier told to add the text https://www.google.com/search?q= to the beginning of the text. And then, I did window.open(query); to open it in another tab and then do a Google search..
NOTE : This code doesn't run here on Stack Overflow. But, I have tested it externally. It is verified and ready to go...
function search(containerid) {
if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
var query = "https://www.google.com/search?q=" + range;
window.open(query);
}
}
<div class="question" id="div1">
<!--Text to search for (here, CEO of Google)....-->
<span>CEO of Google</span>
</div>
<button class="button" onclick="search('div1')">Search</button>
I am trying to create chrome extension which will read text inside the particular TAG from the Webpage ...
but not able to read value
I need to pick Text inside the tag definition excluding html tags..
here i want to read the value from the tag "definition"
output:is an overwhelming urge to have of something is often connected with money
suppose web page is like this
<div id="definition">
<div class="section blurb">
<p class="short"><i>Greed</i> is an overwhelming urge to have <i>more</i>
of something
<p class="long"><i>Greed</i> is often connected with money</p>
</div>
</div>
this is what i was trying
popup.html
<script>
var newwin = chrome.extension.getBackgroundPage();
newwin.get();
</script>
background.html
<Script>
function get()
{
var myDivObj = document.getElementById("definition");
if ( myDivObj ) {
alert (myDivObj.innerHTML);
}else{
alert ( "Alien Found" );
}
}
</Script>
I moved my script from the background page to content scrit and it worked like charm..
but was just wondering why dint work in background page..?
I want add dynamically data-role pages in my phonegap application. I thought that I can do this with something like this but isn't working
jQuery(function()
{
var theList = jQuery('#results');
for(i=0; i<mytool_array.length; i++)
{
content = '<div data-role="page" id="page'+i+'"><div data-role="header" data-backbtn="false"></div><div data-role="content"><p>page=+'+i+'</p></div></div>';
theList.append(content);
}
})
Im my HTML:
<div id="results"></div>
As far as I can predict the problems are:
you shouldn't put pages in a div. they should be in body
your function starts at DOMready, so it is after (or partially during) jquery mobile makes its formatting
rethink your idea. putting basic html structure in body and filling them later should work better
Consider making it a list or a set of collapsibles instead of pages.
This said, your current code should look like this:
jQuery(function($)
{
var b = $('body');
for(i=0; i<mytool_array.length; i++)
{
$('<div data-role="page" id="page'+i+'"><div data-role="header" data-backbtn="false"></div><div data-role="content"><p>page=+'+i+'</p></div></div>') //newline added for readability. it shouldn't be here
.appendTo(b).page(); //newline added for readability
}
});