Here's the script I have:
I would like to convert it to pure JavaScript, so I won't have to use jQuery.
if ( $('#movie.playing').length ) {
$('.settings').click();
$('<style> .element { display: none; } </style>').appendTo(document.head);
$('.item').click(function() {
if ($(this).text().trim() === "Ann") {
if ($(this).attr('aria-checked') == 'true') {
$('.element').css('display', 'block');
} else {
$('.element').css('display', 'none');
}
}
});
}
Here's what I have so far:
var movie = document.querySelector("#movie_player.playing-mode");
if ( movie ) {
document.querySelector(".settings").click();
var style = document.createElement("text/css");
style.styleSheet.cssText = ".element { display: none; }";
document.head.appendChild(style);
document.querySelector(".item").click(function() {
/* what do I do with this part? */
if ($(this).text().trim() === "Ann") {
if ($(this).attr('aria-checked') == 'true') {
$('.element').css('display', 'block');
} else {
$('.element').css('display', 'none');
}
}
});
}
I don't know how to convert the if-statement, where on click of the button with text "Ann" it is going to switch the elements from display: block to none and vice versa.
$(selector) = document.querySelector(selector)
$(selector).click() = document.querySelector(selector)(maybe cache the element first).addEventlistener(eventType, fn)
css stuff can be add as 'class' like el.classList.add(someClassName).
UPDATE
It's better to get the basic knowledge with JavaScript | MDN. Personal it's easy than jQuery.
Related
I want to remove a div by userscripts where only possible thing to differ the div is bacground image in inline css.
Suppose a div has the following CSS:
(background-image:http://www.example.com/example.png)
Could anyone help me about that?
I have tried the following one but not working.
var badDivs = $("div div:contains('background-image')");
badDivs.remove ();
Use:
$("div").each(function() {
if ($(this).css("background-image") != 'none') {
$(this).remove();
}
});
Documentation: .each(), .css(), .remove().
WARNING!! checking ALL div will be a huge work, you should use a class like toCheck instead. So:
$(".toCheck").each(function() {
if ($(this).css("background-image") != 'none') {
$(this).remove();
}
});
Working DEMO.
$(".toCheck").each(function() {
if ($(this).css("background-image") != 'none') {
$(this).remove();
}
});
div {
border:1px solid #000;
}
.toCheck {
width: 100px;
height: 100px;
}
#withImage {
background-image: url("http://www.placehold.it/100/100");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="toCheck" id="withImage">
Div to check with an image
</div>
<div class="toCheck">
Div to check without an image
</div>
<div>
Normal div
</div>
UPDATE:
Since your class toCheck is partial-variable you will need a more tricky script using Regular Expression. First you need to extend JQUERY selectors (tutorial) so for :regex:
jQuery.expr[':'].regex = function(elem, index, match) {
var matchParams = match[3].split(','),
validLabels = /^(data|css):/,
attr = {
method: matchParams[0].match(validLabels) ?
matchParams[0].split(':')[0] : 'attr',
property: matchParams.shift().replace(validLabels,'')
},
regexFlags = 'ig',
regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
return regex.test(jQuery(elem)[attr.method](attr.property));
}
then use it with your variable class:
$("div:regex(class, profile_view_img_+[0-9]*)").each(function() {
if ($(this).css("background-image") != 'none') {
$(this).remove();
}
});
Updated DEMO.
jQuery.expr[':'].regex = function(elem, index, match) {
var matchParams = match[3].split(','),
validLabels = /^(data|css):/,
attr = {
method: matchParams[0].match(validLabels) ?
matchParams[0].split(':')[0] : 'attr',
property: matchParams.shift().replace(validLabels,'')
},
regexFlags = 'ig',
regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
return regex.test(jQuery(elem)[attr.method](attr.property));
}
$("div:regex(class, profile_view_img_+[0-9]*)").each(function() {
if ($(this).css("background-image") != 'none') {
$(this).remove();
}
});
div {
border:1px solid #000;
}
.toCheck {
width: 100px;
height: 100px;
}
#withImage {
background-image: url("http://www.placehold.it/100/100");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="profile_view_img_22222222" id="withImage">
Div to check with an image
</div>
<div class="profile_view_img_1111111">
Div to check without an image
</div>
<div>
Normal div
</div>
I am having trouble getting my script to work here. I am trying to target the show me span when the checkboxes are checked and it's not working.
Here is the code and link to fiddle: http://jsfiddle.net/dalond/nonyg6sm/
$('.single').live('change', ':checkbox', function() {
var target = $(this).closest('.single').prev().find('.showMe');
if ($(this).find('input:checked').length == 0) {
target.hide();
} else {
target.show();
}
});
I got it worked : http://jsfiddle.net/nonyg6sm/3/
$('input[type=checkbox]').click(function() {
var target = $(this).closest('.NoEd').prevAll(".Subs:first").find(".showMe");
if (this.checked) {
target.show();
} else {
target.hide();
}
});
You can modify it to feet your need.
UPDATE
http://jsfiddle.net/nonyg6sm/4/
$('input[type=checkbox]').click(function() {
var target = $(this).closest('.NoEd').prevAll(".Subs:first").find(".showMe");
if ($(this).closest('.NoEd').find("input[type=checkbox]:checked").length == 0) {
target.hide();
} else {
target.show();
}
});
i have a javascript code that when a link is clicked, it can show and hide divisions of the page.
function shoh(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
if (document.getElementById(id).style.display == "none"){
$(id).fadeIn();
} else {
$(id).hide();
}
} else {
if (document.layers) {
if (document.id.display == "none"){
document.id.display = 'block';
} else {
document.id.display = 'none';
}
} else {
if (document.all.id.style.visibility == "none"){
document.all.id.style.display = 'block';
} else {
document.all.id.style.display = 'none';
}
}
}
}
however it now doesn't work when i added the jquery fadeIn and hide instead of using the document.getElementByid method. why?
In order to select an element by id with jQuery, you have to use the selector syntax which means appending a # to the id. So, change
$(id).fadeIn();
to
$("#" + id).fadeIn();
Try this:
function shoh(id) {
var el = $('#' + id);
if (el.is(':visible')) {
el.hide();
} else {
el.fadeIn();
}
}
Due jquery works for you, you won't write crossbrowser code.
So simply
var $el = $('#'+id); // <-- this is the main key :-)
if ($el.css('display') == "none"){
$el.fadeIn();
} else {
$el.hide();
}
You could just declare it as a variable and then wrap it in a jQuery selector:
var $el = $(document.getElementById(id));
// if
$el.fadein();
//else
$el.hide();
jsFiddle
I tried this but it isn't working:
$('cbxShowNotifications').click(function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
});
EDIT -
Fixed a few things but I'm still unable to show the DIV AFTER I hide it:
$('#cbxShowNotifications').on('click', (function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
}));
change ($(this).checked) to ($(this).is(':checked'))
You have some syntax issues, and you should monitor the change event on checkboxes:
$('#cbxShowNotifications').on('change', function () {
var tview = $('#treeview');
if ($(this).prop('checked')) {
tview.show();
} else {
tview.hide();
}
});
NOTE: You can set the initial state by the trigger of the change event:
$('#cbxShowNotifications').trigger('change');
You can do it like this:
$('#treeview').on({
'change': function(){
if ($('div').css('display') == 'block') {
$('div').hide();
} else {
$('div').show();
}
}
})
jsfiddle: http://jsfiddle.net/PWAwz/
is this what you're searching? I wrote the codes below you can check they are working in example too. http://jsfiddle.net/jquerybyexample/xe7aL/
$(document).ready(function(){
$('.checkbox1').change(function(){
$('.tview').toggle('fast');
});
});
I know your question is related to jQuery, but if the purpose is purely presentational, perhaps you can consider a CSS way to accomplish the same thing:
#treeview {
display: none
}
#cbxShowNotifications:checked ~ #treeview {
display: block
}
You can take a look at an example here: http://jsfiddle.net/BZQX4/5/
I have the below jquery statement
$(this).('span.section1').css('background','url("images/accordion_closed_left.png") no-repeat scroll 0 0 transparent');
How do I write a if else statement for the css condition. What I mean is if the background image is accordion_closed_left.png then <do this> or else <do this>.
just to be precise <do this> are blocks of statement.
Thanks for your time.
I'd recommend to use a css class instead and then call jQuery's .hasClass() method on it:
css:
.closed {
background: url("images/accordion_closed_left.png") no-repeat scroll 0 0 transparent;
}
js:
var $target = $(this).find('span.section1');
if( $target.hasClass( 'closed' ) ) {
$target.removeClass( 'closed' );
}
else {
$target.addClass( 'closed' );
}
How to write this in jQuery with 'guides' as a class name....
<script type="text/javascript" >
function guideMenu()
{
if (document.getElementById('guides').style.display == "none") {
document.getElementById('guides').style.display = "block";
}
else {
document.getElementById('guides').style.display = "none";
}
}
</script>
To naively answer your question:
if ($(this).('span.section1').css('background').match('|/accordion_closed_left\.png"|')) {
}
else {
}
However I support jAndy's answer, .hasClass() is the way to go!