Dropdown menu not working on mobile - html

I have searched high and low and tried many different options from here, but i need a point in the right direction now :)
On this site:
http://www.michael-smith-engineers.co.uk
On the main nav, (in mobile view) if you click on Pumps, there should be further dropdown options, but i can not get this working. Any ideas would be appreciated.
I have tried adding the following script, without any luck...
<script>
// see whether device supports touch events (a bit simplistic, but...)
var hasTouch = ("ontouchstart" in window);
var iOS5 = /iPad|iPod|iPhone/.test(navigator.platform) && "matchMedia" in window;
// hook touch events for drop-down menus
// NB: if has touch events, then has standards event handling too
// but we don't want to run this code on iOS5+
if (hasTouch && document.querySelectorAll && !iOS5) {
var i, len, element,
dropdowns = document.querySelectorAll("#nav-site li.children > a");
function menuTouch(event) {
// toggle flag for preventing click for this link
var i, len, noclick = !(this.dataNoclick);
// reset flag on all links
for (i = 0, len = dropdowns.length; i < len; ++i) {
dropdowns[i].dataNoclick = false;
}
// set new flag value and focus on dropdown menu
this.dataNoclick = noclick;
this.focus();
}
function menuClick(event) {
// if click isn't wanted, prevent it
if (this.dataNoclick) {
event.preventDefault();
}
}
for (i = 0, len = dropdowns.length; i < len; ++i) {
element = dropdowns[i];
element.dataNoclick = false;
element.addEventListener("touchstart", menuTouch, false);
element.addEventListener("click", menuClick, false);
}
}
</script>
This script above is ridiculous for what i was trying so, tried this:
<script type="text/javascript">
function is_touch_device() {
return (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
}
if(is_touch_device()) {
jQuery('.toggle-menu').on('click', function(){
jQuery(this).toggleClass('activate');
jQuery(this).find('ul').slideToggle();
return false;
});
}
</script>
</head>
Still no luck tho?!!!!

Related

Get the first hyperlink and its text value

I hope everyone is in good health health and condition.
Recently, I have been working on Google Docs hyperlinks using app scripts and learning along the way. I was trying to get all hyperlink and edit them and for that I found an amazing code from this post. I have read the code multiple times and now I have a good understanding of how it works.
My confusion
My confusion is the recursive process happening in this code, although I am familiar with the concept of Recursive functions but when I try to modify to code to get only the first hyperlink from the document, I could not understand it how could I achieve that without breaking the recursive function.
Here is the code that I am trying ;
/**
* Get an array of all LinkUrls in the document. The function is
* recursive, and if no element is provided, it will default to
* the active document's Body element.
*
* #param {Element} element The document element to operate on.
* .
* #returns {Array} Array of objects, vis
* {element,
* startOffset,
* endOffsetInclusive,
* url}
*/
function getAllLinks(element) {
var links = [];
element = element || DocumentApp.getActiveDocument().getBody();
if (element.getType() === DocumentApp.ElementType.TEXT) {
var textObj = element.editAsText();
var text = element.getText();
var inUrl = false;
for (var ch=0; ch < text.length; ch++) {
var url = textObj.getLinkUrl(ch);
if (url != null) {
if (!inUrl) {
// We are now!
inUrl = true;
var curUrl = {};
curUrl.element = element;
curUrl.url = String( url ); // grab a copy
curUrl.startOffset = ch;
}
else {
curUrl.endOffsetInclusive = ch;
}
}
else {
if (inUrl) {
// Not any more, we're not.
inUrl = false;
links.push(curUrl); // add to links
curUrl = {};
}
}
}
if (inUrl) {
// in case the link ends on the same char that the element does
links.push(curUrl);
}
}
else {
var numChildren = element.getNumChildren();
for (var i=0; i<numChildren; i++) {
links = links.concat(getAllLinks(element.getChild(i)));
}
}
return links;
}
I tried adding
if (links.length > 0){
return links;
}
but it does not stop the function as it is recursive and it return back to its previous calls and continue running.
Here is the test document along with its script that I am working on.
https://docs.google.com/document/d/1eRvnR2NCdsO94C5nqly4nRXCttNziGhwgR99jElcJ_I/edit?usp=sharing
I hope you will understand what I am trying to convey, Thanks for giving a look at my post. Stay happy :D
I believe your goal as follows.
You want to retrieve the 1st link and the text of link from the shared Document using Google Apps Script.
You want to stop the recursive loop when the 1st element is retrieved.
Modification points:
I tried adding
if (links.length > 0){
return links;
}
but it does not stop the function as it is recursive and it return back to its previous calls and continue running.
About this, unfortunately, I couldn't understand where you put the script in your script. In this case, I think that it is required to stop the loop when links has the value. And also, it is required to also retrieve the text. So, how about modifying as follows? I modified 3 parts in your script.
Modified script:
function getAllLinks(element) {
var links = [];
element = element || DocumentApp.getActiveDocument().getBody();
if (element.getType() === DocumentApp.ElementType.TEXT) {
var textObj = element.editAsText();
var text = element.getText();
var inUrl = false;
for (var ch=0; ch < text.length; ch++) {
if (links.length > 0) break; // <--- Added
var url = textObj.getLinkUrl(ch);
if (url != null) {
if (!inUrl) {
// We are now!
inUrl = true;
var curUrl = {};
curUrl.element = element;
curUrl.url = String( url ); // grab a copy
curUrl.startOffset = ch;
}
else {
curUrl.endOffsetInclusive = ch;
}
}
else {
if (inUrl) {
// Not any more, we're not.
inUrl = false;
curUrl.text = text.slice(curUrl.startOffset, curUrl.endOffsetInclusive + 1); // <--- Added
links.push(curUrl); // add to links
curUrl = {};
}
}
}
if (inUrl) {
// in case the link ends on the same char that the element does
links.push(curUrl);
}
}
else {
var numChildren = element.getNumChildren();
for (var i=0; i<numChildren; i++) {
if (links.length > 0) { // <--- Added or if (links.length > 0) break;
return links;
}
links = links.concat(getAllLinks(element.getChild(i)));
}
}
return links;
}
In this case, I think that if (links.length > 0) {return links;} can be modified to if (links.length > 0) break;.
Note:
By the way, when Google Docs API is used, both the links and the text can be also retrieved by a simple script as follows. When you use this, please enable Google Docs API at Advanced Google services.
function myFunction() {
const doc = DocumentApp.getActiveDocument();
const res = Docs.Documents.get(doc.getId()).body.content.reduce((ar, {paragraph}) => {
if (paragraph && paragraph.elements) {
paragraph.elements.forEach(({textRun}) => {
if (textRun && textRun.textStyle && textRun.textStyle.link) {
ar.push({text: textRun.content, url: textRun.textStyle.link.url});
}
});
}
return ar;
}, []);
console.log(res) // You can retrieve 1st link and test by console.log(res[0]).
}

Google Apps Script. Get all links from document

Hi all) I need to get all links from google document. I found that general approach:
function getAllLinks(element) {
var links = [];
element = element || DocumentApp.getActiveDocument().getBody();
if (element.getType() === DocumentApp.ElementType.TEXT) {
var textObj = element.editAsText();
var text = element.getText();
Logger.log("text " + text);
var inUrl = false;
for (var ch=0; ch < text.length; ch++) {
var url = textObj.getLinkUrl(ch);
if (url != null) {
if (!inUrl) {
// We are now!
inUrl = true;
var curUrl = {};
curUrl.element = element;
curUrl.url = String( url ); // grab a copy
curUrl.startOffset = ch;
}
else {
curUrl.endOffsetInclusive = ch;
}
}
else {
if (inUrl) {
// Not any more, we're not.
inUrl = false;
links.push(curUrl); // add to links
curUrl = {};
}
}
}
}
else {
var numChildren = element.getNumChildren();
for (var i=0; i<numChildren; i++) {
links = links.concat(getAllLinks(element.getChild(i)));
}
}
Logger.log(links);
}
It works perfectly fine if i, for example, type url in text, but if add link via menu ("Insert" -> "Link") it doesn't work, function getLinkUrl() returns null. Documentation contains info about Link class, i thought all links represented by it, but don't understand why i can't get link inserted via menu.
I thought maybe i can use some regular expression on text of document element, but if i add link via menu item i can specify custom label for link, which may not contain url in it.
Have anyone faced this scenario? What i missed?

When using CTRL+Click SELECTION_CHANGED_EVENT not triggered

I have created an onSelection changed method as per the tutorial set out here: Selection Override
i have set this up for multi-selection as well which works well.
However when I try to deselect a group selected component it doesn't trigger the onSelectionChange event as I have it coded (shown below). The method is never triggered.
But if I comment out this line:
viewerApp.getCurrentViewer().select(idsToSelect);
Then the toggle of selected components works perfectly. And triggers the onSelectionChnge event.
Any help? Is there an alternative to doing methods after the slection has changed? Possibly when a part is clicked?
The code looks like this:
viewerApp.getCurrentViewer().addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onSelectionChanged);
function onSelectionChanged(data) {
console.log("selection changed event. Selected dbIds are: " + data.dbIdArray.toString());
if (data.dbIdArray.length > 0 && data.fragIdsArray.length > 0) {
var idsToSelect = [];
var selectionChanged = false;
for (var k = 0; k < data.dbIdArray.length; k++) {
var dbId = data.dbIdArray[k];
if (leafNodes.indexOf(dbId) > -1) {
dbId = viewerApp.getCurrentViewer().model.getData().instanceTree.nodeAccess.getParentId(dbId);
selectionChanged = true;
}
idsToSelect.push(dbId);
}
if (selectionChanged) {
viewerApp.getCurrentViewer().select(idsToSelect);
}
}
}

How to use Mouse Wheel for jumping to next or previous # section in html

I have a site with top nav menu:
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>Cakes</li>
<li>Candy</li>
<li>Marshmellow</li>
<li>Honey</li>
</ul>
</nav>
And all my sections are:
<div id="Cakes" class="page">
<div class="container">
This is sweet
</div>
</div>
How can I use the mouse wheel to jump directly to the next or previous section?
Currently the mouse wheel will scroll the page like normal. But I want it to jump to every section with one wheel rotation without scrolling all the entire page.
Without plugins, all we need to do is to capture the mousewheel using mousewheel event -on Firefox we use DOMMouseScroll instead- and depending on the value of the event's originalEvent.wheelDelta -again in Firefox it is originalEvent.detail, thanks Firefox- if this value is positive then the user is scrolling upward, if it's negative then the direction is down.
JS Fiddle 1
jQuery (1) :
//initialize
var winHeight = $(window).height(),
pages = $('.page'),
navLinks = $('#menu-nav a'),
currentPage = 0;
$('html, body').animate({ scrollTop: 0}, 0);
// listen to the mousewheel scroll
$(window).on('mousewheel DOMMouseScroll', function(e){
//by default set the direction to DOWN
var direction = 'down',
$th = $(this),
// depending on the currentPage value we determine the page offset
currentPageOffset = currentPage * winHeight;
// if the value of these properties of the even is positive then the direction is UP
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
direction = 'up';
}
// if the direction is DOWN and the currentPage increasing won't exceed
// the number of PAGES divs, then we scroll downward and increase the value
// of currentPage for further calculations.
if(direction == 'down' && currentPage <= pages.length - 2){
$th.scrollTop(currentPageOffset + winHeight);
currentPage++;
} else if(direction == 'up' && currentPage >= 0) {
// else scroll up and decrease the value of currentPage IF the direction
// is UP and we're not on the very first slide
$th.scrollTop(currentPageOffset - winHeight);
currentPage--;
}
});
// as final step we need to update the value of currenPage upon the clicking of the
// navbar links to insure having correct value of currentPage
navLinks.each(function(index){
$(this).on('click', function(){
navLinks.parent().removeClass('current');
$(this).parent().addClass('current');
currentPage = index;
});
});
(1) UPDATE
If you don't want to use jQuery, below is pure javascript code doing the same as above, this won't work in IE8 and below though:
JS Fiddle 2
Pure Javascript:
//initialize
var winHeight = window.innerHeight,
pages = document.getElementsByClassName('page'),
navLinks = document.querySelectorAll('#menu-nav a'),
currentPage = 0;
window.addEventListener('mousewheel', function(e) {
scrollPages(e.wheelDelta);
});
window.addEventListener('DOMMouseScroll', function(e) {
scrollPages(-1 * e.detail);
});
function scrollPages(delta) {
var direction = (delta > 0) ? 'up' : 'down',
currentPageOffset = currentPage * winHeight;
if (direction == 'down' && currentPage <= pages.length - 2) {
window.scrollTo(0, currentPageOffset + winHeight);
currentPage++;
} else if (direction == 'up' && currentPage > 0) {
window.scrollTo(0, currentPageOffset - winHeight);
currentPage--;
}
}
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', updateNav(i));
}
function updateNav(i) {
return function() {
for (var j = 0; j < navLinks.length; j++) {
navLinks[j].parentNode.classList.remove('current');
}
navLinks[i].parentNode.classList.add('current');
currentPage = i;
}
}
You'll need to get a plug-in to add the mousewheel event.
Maybe try this one this.
it's got pretty good examples.

audio won't work on safari browser

could someone please help me to find out why this won't work on safari browser? It seems to work really well in all other browsers apart from Safari. I really could not work it out.
Any help will be most appreciated.
function loadPlayer()
{
var audioPlayer = new Audio();
audioPlayer.controls="";
audioPlayer.setAttribute("data-index", -1); //set default index to -1.
audioPlayer.addEventListener('ended',nextSong,false);
audioPlayer.addEventListener('error',errorFallback,true);
document.getElementById("player").appendChild(audioPlayer);
}
function nextSong(index, e)
{
var next;
var audioPlayer = document.getElementsByTagName('audio')[0];
//check for index. If so load from index. If not, index is defined auto iterate to next value.
if (index >= 0)
{
next = index;
}
else
{
next = parseInt(audioPlayer.getAttribute("data-index"))+1;
next >= urls.length ? next = 0 : null;
}
audioPlayer.src=urls[next][0]; //load the url.
audioPlayer.setAttribute("data-index", next);
//disable the player.
var audioPlayerControls = document.getElementById("playerControls");
audioPlayer.removeEventListener('canplay',enablePlayerControls,false);
audioPlayerControls.setAttribute("disabled", true);
audioPlayer.addEventListener('canplay',enablePlayerControls,false);
audioPlayer.load();
//show the image:
var image = document.getElementById("playerList").querySelectorAll("a")[next].querySelector("img").cloneNode();
image.style.width = "30px";
if(audioPlayerControls.querySelector("img"))
{
audioPlayerControls.replaceChild(image, audioPlayerControls.querySelector("img"));
}
else
{
audioPlayerControls.insertBefore(image, audioPlayerControls.querySelector("a"));
}
}
function enablePlayerControls()
{
//File has loaded, so we can start playing the audio.
//Enable the player options.
var audioPlayer = document.getElementsByTagName('audio')[0];
audioPlayer.removeEventListener('canplay',enablePlayerControls,false);
document.getElementById("playerControls").removeAttribute("disabled");
audioPlayer.play();
}
function errorFallback() {
nextSong();
}
function playPause()
{
var audioPlayer = document.getElementsByTagName('audio')[0];
if (audioPlayer.paused)
{
audioPlayer.play();
} else
{
audioPlayer.pause();
}
}
function pickSong(e)
{
//we want the correct target. Select it via the event (e).
var target;
//pickSong does the selecting:
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() == "img")
{
//The event target = the img element.
target = e.target.parentElement;
}
else
{
//the event target is the a element
target = e.target;
}
var index = target.getAttribute("data-index"); //get the song index stored in the data-index attribute.
nextSong(index);
}
var urls = new Array();
urls[0] = ['http://mp3lg4.tdf-cdn.com/9079/jet_143844.mp3', 'http://radio-maghreb.net/radio/radio almazighia.png'];
urls[1] = ['http://mp3lg4.tdf-cdn.com/9077/jet_143651.mp3', "http://radio-maghreb.net/radio/alwatania.png"];
urls[2] = ['http://mp3lg4.tdf-cdn.com/9080/jet_144136.mp3', "http://radio-maghreb.net/radio/inter.jpg"];
function startAudioPlayer()
{
loadPlayer();
for (var i = 0; i < urls.length; ++i)
{
//this for loop runs through all urls and appends them to the player list. This smooths the adding off new items. You only have
//to declare them in the array, the script does the rest.
var link = document.createElement("a");
link.href = "javascript: void(0)";
link.addEventListener("click", pickSong, false);
link.setAttribute("data-index", i);
link.img = document.createElement("img");
link.img.src = urls[i][1];
link.appendChild(link.img);
document.getElementById("playerList").appendChild(link);
}
}
//Event that starts the audio player.
window.addEventListener("load", startAudioPlayer, false);
#playerControls[disabled=true] > a{
color: #c3c3c3;
}
<span id="playerControls" disabled="true">
Play
Stop
</span>
Next Track
<!-- player ends -->
<br>
<br>
<!-- img links start -->
<div id="playerList">
</div>