I'm trying to make a friends list where you can click the button at the top for a drop down menu.
<script>
var dropAll = false;
function changeAllFriendsDrop()
{
if (dropAll == false)
{
dropAll = true;
}
else
{
dropAll = false;
}
}
</script>
My function is simple enough but when i try call it onClick it doesn't seem to be working.
<li role="heading" data-role="list-divider" style="color:#F25A97">
<a >
<button onclick="changeAllFriendsDrop()">All Friends </button>
</a>
</li>
{$friend = array("Josh","Phil","Paul","Sean")}
{if !empty($friend)}
{foreach $friend as $person}
<script> if (dropAll == true){ </script>
<li data-theme="a" style="color:#F25A97">
<a href="">
{$person}
</a>
<a align="left" style="size: 10px">
Last Seen: {$lastLocation}
</a>
</li>
<script> } </script>
{/foreach}
{/if}
It doesn't seem to call the function so the if statement cannot be checked, any advice would be greatly appreciated.
Your callback function dropAll isn't actually causing anything to change on the page, it is just setting a variable. The line if (dropAll == true) will only be evaluated once, and even then will not do anything useful - a JavaScript if like that won't tell the browser to hide content, that's just not how it works. (In fact, since each <script> tag is evaluated separately, you are probably getting a JavaScript error because there's no } in the first <script> tag.)
What you need to do is write a JavaScript function which actually toggles the visibility of those parts of the page. I would strongly recommend using a JavaScript library such as jQuery rather than doing this in "plain" JavaScript.
For instance, if you gave each of the elements you want to toggle class="togglableFriendItem", you could use the jQuery .toggle() function like this:
function toggleAllFriendsDrop()
{
$('.togglableFriendItem').toggle();
}
Related
I´ve got this code snipped:
<?php
if (class_exists('countdown')) {
$myclass = "counter";
}else{
$myclass = "";
}
?>
<div class="jumbotron <?php echo $myclass; ?>
<div class="bg_wrapper">
<div class="bg_banner"
<div class="container">
<div class="content_wrap">
<ul class="countdown">
</ul>
</div>
</div>
</div>
</div>
</div>
What I want to do is, PHP need to check at the DOM if the div with the class "countdown" exits and if yes, create a new one.
Can you help me, with class_exists its not working.
Thank
The class_exists() function is a PHP function, which doesn't know anything about your HTML or CSS. PHP does something on your webserver, and your webserver sends everything (HTML) to your browser. From that moment, you need JavaScript to manipulate your DOM.
Read about class_exists() on: http://php.net/manual/en/function.class-exists.php
You can use jQuery (a JavaScript library) to check if a CSS class exists:
if ($('.countdown').length > 0) {
// exists
}
If your class exists you can add the class 'counter' to your jumbotron:
if ($('.countdown').length > 0) {
$('.jumbotron').addClass('counter');
}
You should place this code in a document ready handler, so it will be executed automatically when your page is loaded:
$(document).ready(function () {
if ($('.countdown').length > 0) {
$('.jumbotron').addClass('counter');
}
}
Don't forget to include jQuery to your page, otherwise it won't work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
And for more information about DOM manipulation using jQuery: http://api.jquery.com/
I have 3 paper-toggle-buttons that I would like to have disabled until I click an "edit" button (makes sense to do that).
I have cobbled this together in a long-winded form, however I wanted to know if there was a way in PolymerJS that you could use either the this.$.ID-NAME or the this.$$('CLASS-NAME') to select all of the paper-toggle-buttons, assuming that I gave them all the same ID and CLASS names (bad practise to duplicate ID's I know).
Any help is appreciated. I know that it's currently working, but I just want to know if there's an easier way.
I am currently working with the following (the toggle will occur when clicking a button with on-click event "editMode"):
HTML
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Active User</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isActive}}" disabled></paper-toggle-button>
</div>
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Operator</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isOperator}}" disabled></paper-toggle-button>
</div>
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Manager</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isManager}}" disabled></paper-toggle-button>
</div>
PolymerJS
editMode : function() {
toggle1 = this.$.toggle1;
toggle2 = this.$.toggle2;
toggle3 = this.$.toggle3;
if( EditDiv.style['display'] == 'none' )
{
toggle1.toggleAttribute('disabled');
toggle2.toggleAttribute('disabled');
toggle3.toggleAttribute('disabled');
}
else
{
toggle1.toggleAttribute('disabled');
toggle2.toggleAttribute('disabled');
toggle3.toggleAttribute('disabled');
}
}
You could take a look to Polymer DOM API, there're a lof of functions to interact with the DOM. I think you're looking for Polymer.dom(this.root).querySelectorAll('.toggle')
$$ returns the first node in the local DOM that matches selector.
you can do
Array
.from(Polymer.dom(this.root).querySelectorAll('.foo'))
.forEach($0 => /* do something */)
;
Then, just a note, your snippet doesn't make much sense because you are performing the same operation in if and else statements:
if(expression) {
toggle1.toggleAttribute('disabled')
} else {
toggle1.toggleAttribute('disabled')
}
// is equal to:
toggle1.toggleAttribute('disabled')
your code could definitely look like:
{
editMode() {
return [
this.$.toggle1,
this.$.toggle2,
this.$.toggle3
]
.forEach($0 => $0.toggleAttribute('disabled'))
}
}
url:http(s)://bbs.ngacn.cc/nuke.php?__lib=login&__act=login_ui
<a id="showcaptchad" href="javascript:void(0)" onclick="showCaptchad(this)">xxxxxxxx</a>
script = '''
function main(splash)
splash.images_enabled = false
splash.resource_timeout = 100.0
splash:autoload('http://code.jquery.com/jquery-2.1.3.min.js')
assert(splash:go(splash.args.url))
splash:wait(1)
splash:runjs("$('#showcaptchad').click()")
splash:wait(0.5)
return splash:html()
end
'''
it never works.
but
document.getElementById("showcaptchad").click()
worked well
question:
1.Whether jQuery does not support click() .
2.how can I click the link like
<a tabindex="-1" href="#J_Reviews" rel="nofollow" hidefocus="true" data-index="1">xxxxxxx<em class="J_ReviewsCount" style="display: inline;">62791</em></a>
or
2
they don't contain id='xxx' or name='xxx' .
I can't use 'getElementById()' or 'getElementsByName()'.
what should I do?
I just want to click once
why so hard (╯°口°)╯(┴—┴
===============================================
After 100000000 times
splash:runjs('document.querySelector("#showcaptchad").click()')
this worked
it looks like not jQuery method
===============================================
I was shown how to do this just now
To use getElementById, getElementByName, getElementsByTagName() and some simple
function can almost do everything
jQuery looks like not necessary
You can do it with Javascript onclick handler or you can select the element with the jquery atribute selector
$('a[href=#J_Reviews]').click(function(){
alert('jQuery way')
})
function myFunction(){
alert('Javascriptway');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a tabindex="-1" href="#J_Reviews" rel="nofollow" hidefocus="true" data-index="1">xxxxxxx<em class="J_ReviewsCount" style="display: inline;" >62791</em></a>
or
2
Or you can use this to listen click event
$('a[href=#J_Reviews]').on('click',function(){
alert("jQuery way too");
});
I'm attempting to change the entire background color of the body to the color that the button is assigned to. I'm new to javascript but I looked over the internet and my notes and couldn't find a problem. I think I'm just missing something very simple orrrrr i could be wayyy off.
THE HTML
<nav>
<ul>
<li>
<button onclick="white()">
<p>White</p>
</button>
</li>
<li>
<button onclick="red()">
<p>Red</p>
</button>
</li>
<li>
<button onclick="yellow()">
<p>Yellow</p>
</button>
</li>
<li>
<button onclick="blue()">
<p>Blue</p>
</button>
</li>
</ul>
</nav>
THE JAVASCRIPT
function white() {
document.body.backgroundColor("white");
}
function red() {
document.body.backgroundColor("red");
}
function yellow() {
document.body.backgroundColor("yellow");
}
function blue() {
document.body.backgroundColor("blue");
}
backgroundColor is an attribute, not a function. And its a style attribute. Change your lines to this:
document.body.style.backgroundColor = "yellow"
Furthermore, the onClick attribute is kind of outdated. You can try to work with event handlers in JavaScript itself instead (more information).
document.body.style.backgroundColor = "white"; // or any other color
More info on the style property in MDN.
You have the right idea, you just need to make sure you select the body element of the window correctly:
document.querySelector('body').style.backgroundColor
So your functions would look like:
function white() {
document.querySelector('body').style.backgroundColor = "white";
}
....
Note:
Make sure that you put your JavaScript at the end of the webpage too, it you aren't already!
This is my script. The script works when i click but it is not hidden when i click outside.
$(document).ready(function() {
//Translate(); //caling Language Translater function
$("#translate_image").attr('href', base_url)
$("#select_lang").click(function() {
$("#lang_visible").attr('style', 'visibility: visible');
})
})
Here's my HTML:
<li>
<div class="clsCurrent_Lan ">
<a class="clsHead_Link_Bg" href="#" id="select_lang">
<span>Select Language</span>
</a>
</div>
<ul id="lang_visible" >
<?php foreach($language_drops as $lang){?>
<li>
<a href="<?php echo admin_url('home/ch_language/' .
$lang->language_code)?>"
id="<?php echo $lang->language_code?>">
<?php echo ucfirst($lang->language_name);?></a>
</li>
<?php }?>
</ul>
</li>
$(document).mouseup(function(e) {
if ($(e.target).parents('#select_lang').length === 0) {
$("#lang_visible").attr('style', 'visibility: hidden');
}
});
Try that. Add it within your document ready call. Basically clicking anywhere besides in the #select_lang selector will cause the visibility of #lang_visible to be hidden.
I think you are going about this the wrong way, sort of like reinventing the wheel. So the behavior you want is to have a control where the user can select a language from a number of different languages? Rather than trying to roll your own, why not just use the "Select" element? You can use php to set up the "Select" initially, and then use javascript/jQuery to respond to state changes.
So, something like this then?
$(document).ready(function () {
//Translate(); //calling Language Translater function
$("#translate_image").attr('href',base_url);
$("#select_lang").click(function () {
$("#lang_visible").attr('style','visibility: visible').click(function (e) {
$(this).hide(); //hides the #lang_visible element
//$(this).parent().hide(); //to hide the <li> containing the #lang_visible element
e.preventDefault();
return false;
});
});
});