Started a project to build a website, so far was going good until this problem.
The problem: " I'm tried to make a dropdown menu to show options for a post(delete and edit). I made the dropdown menu and it works perfectly on my laptop(Mac-book pro, testing on google chrome), my partner on this project works on a windows desktop computer. I sent him the files for him to test, and it does not work, it does not toggle the "active" on the drop down element, we tried on his computer, chrome, fire-fox, even on his cellphone (safari and chrome) and it does not work. The click works, we tested it."
I will let you know what we did for knowing what was wrong if we could find out a solution.
Tests:
Click works, we made an alert when it was clicked so we know that it entered to the function we made
We did the console.log of the element after the toggle function. In this case something "weird" happened, the output was the element with the "active" on the class but the element in the dev-tool does not change.
We made it with vanilla JS, I could have used jQuery, normally I like to test things with JavaScript for then doing the jump to jQuery, but as this problem came no time for it.
Other questions you might have, is that there are going to be multiple posts, so this is the way I found to solve my problem to know in which post does the user click to make the correct dropdown.
If someone can help me to solve this I would appreciate, normally I tried to find the solutions by myself but in this case was not possible, I think it goes out of my hands and my knowledge and I find it odd that works on one computer only.
Thank you!.
I will show you the part of the code in case is needed.
HTML:
<div onclick="settings(event)"class="settings" id="1508795">
<i class="fas fa-cog"></i>
</div>
<div class="settingsdropdown" id="post1508795">
<ul>
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
JS:
function settings(e){
var postid=e.currentTarget.getAttribute('id');
var settingslist = document.getElementById('post' + postid);
settingslist.classList.toggle("active");
}
```
I would change the html from:
<div onclick="settings(event)"class="settings" id="1508795">
to (note the this):
<div onclick="settings(this)"class="settings" id="1508795">
Then adjust the function to be:
function settings(e){
var settingslist = document.getElementById('post' + e.id);
settingslist.classList.toggle("active");
}
Related
I feel like my explanation is not precise enough:
I am interessted in a short command line which, pasted into the console of firefox, opens the "help" menu of "www.stackoverflow.com". The button "Tags" on the stackoverflow.com website can be clicked on by
document.getElementsById('nav-tags').click()
The "help" menu on the top right does not have an Id... is it still possible to open it via javascript and additionally click on the first entry after opening "help"?
Former Question:
my problem is rather difficult to explain since I am not familiar with javascript. I am trying to press a button from VBA in order to create folders in a MS Sharepoint environment and to change their settings (for example reading/writing rights). While I figured out the first, the latter is quite difficult because I have to navigate through the Sharepoint website. This could be done with VBA "Sendkey" commands but after some testing it seems to be very error-prone. Additionally, a lot of stackoverflow questions are answered with "execscript" as the solution.
So I am trying to break down the task bit by bit (javascript from VBA)...
First step, send the click command from the firefox console:
executing
document.getElementByID('logo').click();
in the firefox console on this website https://www.google.de/?gws_rd=ssl#q=asd navigates to the main google website.
In the Sharepoint environment the "relevant" code looks like this:
<ul id="Ribbon.LibraryContextualGroup_lower" class="ms-cui-ct-ul" unselectable="on">
<li id="Ribbon.Document-title" class="ms-cui-tt ms-cui-ct-first" role="tab" unselectable="on"></li>
<li id="Ribbon.Library-title" class="ms-cui-tt ms-cui-ct-last" role="tab" unselectable="on">
<a class="ms-cui-tt-a" onkeydown="if(event != null && event.keyCode == 13){ if(typeof(_ribbon)… = true; _ribbonStartInit('Ribbon.Library',false, event); }" title="Bibliothek" onclick="_ribbonStartInit('Ribbon.Library',false, event);" href="javascript:;" unselectable="on">
<span class="ms-cui-tt-span" unselectable="on">
Bibliothek
</span>
<span class="ms-cui-hidden" unselectable="on"></span>
</a>
</li>
</ul>
So I tried:
document.getElementById('Ribbon.library-title').click();
and recieved
undefined
Browsing throught lots of stackoverflow-questions led me to the conclusion that it must have something to do with the unsorted list elements. My guess would be that the classname "ms-cui-tt-a" needs to be in the comandline since it is connected to the "onkeydown" command. But since I am not sure whether I am right and even if I would be, I still dont know how to combine it properly. Thus, any hints are very well appreciated.
Regards, poe
Since there is no ID which can be used, one needs to create a list of all the elements in question and has to select the correct one either by title or something else, in this case by order.
the list is being created by the following command
$ document.getElementsByClassName('icon-help js-help-button');
since there is only one Element
$ document.getElementsByClassName('icon-help js-help-button')[0].click();
will open the menu.
With regard to my former Questions and the Sharepoint 2013 environment
$ document.getElementsByClassName('ms-cui-tt-span')
There are 3 entries in the list (starting from 0 to 2)
$ document.getElementsByClassName('ms-cui-tt-span')[1].click()
the second Element will be clicked.
Going through a steep learning curve, i am currently experimenting various UX 'toys' that i will require to implement an app. One of these is to disable a button and enable it on the fly. Following the instructions of the good book , I wrote a little snippet of code to test it out. Clicking on "Soap" runs a series of chained promises, and toggles the "Soap1" button disabled prop.
My HTML/JS
<div data-role="content">
<a href="#" id="btn_soap1" class="ui-input-btn ui-btn ui-mini ui-btn-inline ui-icon-back "
onclick="getInitialNotifications();">Soap1</a>
<button id="btn_soap" class="ui-btn ui-btn-inline ui-mini ui-icon-bullets "
onclick="getInitialNotifications();">
Soap
</button>
<script>
$("#btn_soap1").button({ // required initialization
disabled:false
});
$("#btn_soap").on("click", function () {
// bubbled from the onClick thingie in the markup
var isDis = $("#btn_soap1").button("option","disabled");
$("#btn_soap1").button("option","disabled",!isDis);
// var but = $("#btn_soap1");
// var className = "ui-state-disabled";
// if(but.hasClass(className)) {
// but.removeClass(className);
// } else {
// but.addClass(className);
// }
});
</script>
</div>
Intended rendering
Broken rendering (all browsers and device sims and devices)
Question : can you see any noob error in the JS that would cause this side-effect. I added (in comments) my work-around, which works as specified, but is seems counter-intuitive.
EDIT: (from Mr. Duc Nguyen's answer). What breaks the rendering is adding the initialization. If it is not there, i get an exception whining that i am calling a function prior to initialization when changing the disabled state.
EDIT AGAIN : discovered JSfiddle, ... a fiddle that reproduces this
Edited: new answer basing on jsFiddle
You have gotten yourself in a very interesting situation, some points below:
jQM has an auto-initaliasation merchanism, if you want to leverage that, you have to follow the rules, or totally disable it and do the initialisation yourself. jQM global config
You have 2 "buttons", but they are actually 1 <a> and 1 <button>, disabling the <a> was never an easy one, have a look here disabling html link
jQM might confuse you that the <a> tag is a button widget, but it is not! It just has the same styling as a button, not a button widget. Button widget is only applying to <button> and appropriate <input> type (it was clearly mentioned in the documents back in 1.2.0's days, I couldn't find it in the 1.4.5 docs)
So, here is how I would do to leverage the jQM auto-initialisation:
Soap1
<button id="btn_soap" data-inline="true">Soap</button>
Notice on the <a>:
The attribute data-role="button" was to tell jQM to mark it up as a button
This classclass="ui-disabled" was to disable it initially.
And how to disable the link <a> on-the-fly. Notice that by just adding a class, it won't work on some specific infamous browsers, referring to the above stackoverflow answer for more information.
var isDis = $("#btn_soap1").hasClass("ui-disabled");
if (!isDis) {
$("#btn_soap1").addClass("ui-disabled");
} else {
$("#btn_soap1").removeClass("ui-disabled");
}
Again, you can only call .button([method]) on a real button!
Have a look on this updated jsFiddle, I have cleaned things up a bit.
This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.
Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.
When a user enters the page I would like a div to be in the center with a heading, a quote underneath that is randomly picked from a list and a button to enter the site. This is all well and good but I cannot seem to get the button to fade in the main site and fade out the landing div. Here is a jsfiddle to try and help explain things more.
JSFIDDLE
As you will probably be able to tell, I'm not that great with JavaScript or jquery and what I have done so far is from learning bits and pieces and surfing the web through code examples
I do not see why it will not work as I had a play around in jsfiddle with a simplified version of what I want to do and it worked.
Simplified Version
Below code is simplified version (It wouldn't let me post without adding code?)
HTML
<div class="landingDiv">
<h1>LANDING DIV</h1>
<button id="showMain">Enter Site</button>
</div>
<div class="main">
<h1>Main Site</h1>
</div>
JQUERY
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
CSS
.main {
display: none;
opactiy: 0;
}
Thanks in advanced.
Steve.
The first jQuery example threw an error:
$ is not defined
meaning jQuery is not defined/included. Which it wasn't. But in the second jsFiddle, you included jQuery.
You'll notice that on the left hand side of jsfiddle, you'll see that under the "Framewords & Extensions" heading that you can include a Framewordk - so, include jQuery!
Here is the updated fiddle with jQuery included: http://jsfiddle.net/6cGHF/1/
As you move forward in your JavaScript development, it is always a good idea to check your browsers developer tools for errors when something unexpected is happening. It always helps you, and when you ask questions on StackOverflow, providing these errors help us! :)
The shortcut for developer tools in Chrome is F12 - you can see a little red circle with an X in it if you have errors - click it for more info. But developer tools are also available in other major browsers (except IE8 and below).
Edit:
Wrap your click() event function in a $(document).ready()
$(document).ready(function() {
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
});
What was happening was that your HTML file is read from top to bottom. So it would have reached your click function before the #showMain element had been read. So, jQuery couldn't find it.
The reason this wasn't a problem in jsFiddle was because all the JavaScript code was wrapped in an "onLoad" function (which is, admittedly, a little different to $(document).ready()) but it solved this problem for you by executing your JavaScript after everything had already been loaded. You can see that on the left hand side in the fiddle I linked above, you'll find a dropdown with "onLoad" selected. In it, you can also choose "OnDomready" (which would be equivalent to $(document).ready())
In summary:
DON'T use $(document).ready() in jsFiddle. You don't need it.
DO use $(document).ready() around javascript that relies on the fact that the DOM is ready (ie. "all of your content is visible to your JavaScript").
The problem in your fiddle is you have not added jQuery so when you try and reference it with '$', a javascript error is thrown. Simply add in the reference to a jQuery library and your fiddle works to fade out the button when clicked.
Your problems:
1) Add jQuery library to your fiddle.
2) Remove opacity:0; from .main in your CSS. The display:none; is sufficient.
3) Use this to fade out/in the elements:
$("#showMain").click(function () {
$(".landingDiv").fadeOut(1000, function () {
$(".main").fadeIn(1000);
})
});
I'm aware that this is an 'old question' by now, but I have searched and not yet found an explanation that makes sense to me.
Note: I know just enough html, css, and wordpress to have developed my website: (http://www.gregorygainsborough.com), and am just beginning to learn javascript.
If you visit my site, you'll see the problem - much of the content is revealed when various boxes are hovered on. On tablet, since there is no :hover, I'd like to make it do this:
First tap -> reveal the style that would have been applied on :hover.
Second tap -> follow the link like a mouse click would.
ALSO helpful would be to 'close' the :hover style when a) another element is tapped, or b) ten seconds elapse.
Thanks for any help you can offer. I'm aware that some of this will be above my js knowledge at present, and I'm looking for explanations or references which can help me target my learning and close that gap.
I would in PHP make a IF statement to check if Tablet is used.
You can use this Library for this. Then I would in the IF statement echo this javascript out:
var clicked = 0;
$('a.iftablet').on('click',function(){
var old_clicked = clicked;
var number = $(this).attr('tablet_id'); // Get the tablet ID for this item
var clicked = number;
if (old_clicked != number){ return false;} // This might do the trick, so that on first click, it doesn't link.
});
NOTE: I use jQuery, so you need the jQuery library.
NOTE 2: Add class="iftablet" to the links around the boxes, and add as well tablet_id="X" (Where X is a unique number for that box, so that when click on one box, the others will disapear).
Maybe there is some errors on the code, put then let me know. Good luck