Gurus, I am using Jquery to hide or display the fields based on the field value options. Previously I used hide and show function and it was working fine, but there is white space. So I changed to use jquery display none to hide the fields. however it doesn't work, please help, thank you! Below is my code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function(){
hideRating('initial');
}
);
function hideRating(scope){
if(scope=='initial'){
jQuery('[id$=CallSupportBeforeOutput]').style.display = "none";
jQuery('[id$=CallSupportBeforeQuestionLabel]').style.display = "none";
}
}
Here is the solution:
jQuery('#CallSupportBeforeOutput').css("display", "none");
jQuery('#CallSupportBeforeQuestionLabel').css("display", "none");
jQuery('[id$=CallSupportBeforeOutput]') return an array you need to provide index to change the style of elements. See below snippet.
jQuery(document).ready(
function(){
hideRating('initial');
}
);
function hideRating(scope){
if(scope=='initial'){
jQuery('[id$=CallSupportBeforeOutput]')[0].style.display = "none";
jQuery('[id$=CallSupportBeforeQuestionLabel]')[0].style.display = "none";}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color: red"> visible content
<div id="CallSupportBeforeOutput">main content
</div>
<div id="CallSupportBeforeQuestionLabel">second content
</div>
</div>
Also you are mixing pure javascript with jquery by using style.display. You can use .css() jquery method to change the style if you don't want to provide index of elements.
<script type="text/javascript">
jQuery(document).ready(
function(){
hideRating('initial');
}
);
function hideRating(scope){
if(scope=='initial'){
jQuery('[id$=CallSupportBeforeOutput]').css("display", "none");
jQuery('[id$=CallSupportBeforeQuestionLabel]').css("display", "none");}
}
</script>
can you please try this!!
Both hide() function and style.display = 'none'; are same functionality. You have to check the CSS property. May be it will overwrite.
Use .css property instead of .style property as follows:-
jQuery('[id$=CallSupportBeforeOutput]').css("display", "none");
jQuery('[id$=CallSupportBeforeQuestionLabel]').css("display", "none");}
Related
I'm trying to make a small script with an if-statement: I want the condition to be, that if the class "page-title" contains "Welcome" it will add the class "excluded" to the element with the other class called "example". This is the js-code I've tried so far without luck:
<script>
$(document).ready(function(){
if(".page-title:contains('Welcome')"){
document.getElementsByClassName("example").addClass("excluded");
}
else{
}
});
</script>
here is a simple fix with js
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<h1 class="page-title">Welcome</h1>
<div class="example"> Example sample div</div>
<script type="text/javascript">
$(document).ready(function(){
if($('.page-title').text() == 'Welcome') {
$('.example').addClass('excluded');
}else{
// code here
}
});
</script>
You can implement that by selecting container with your class with jQuery, using text() method on it and trying to find "Welcome" in it. Try below code:
if($('.page-title').text().includes('Welcome')) {
// your code here
}
$(document).ready(function(){
if($('.page-title').text().indexOf('Welcome')){
$(".example").addClass("excluded");
}
});
You will need to decide which container/element you wish to add the 'excluded' class to, if you're finding that by using a class, you would write: $(".class-name-of-element-here").addClass("excluded"); or with an ID: $("#id_of_element_here").addClass("excluded");
Notice when searching for a container or element by ID, we use # and a class with .
Any example of this is: $('.page-title') you're looking for any element on the page with a class of page-title
When you're using addClass, you do not need to specify the . as a prefix, because we are specifically looking for a class.
There was 2 problems:
1: document.getElementsByClassName("example").addClass("excluded"); is a mix of javascript and jQuery.
javascript way: document.getElementsByClassName("example").classList.add("excluded");
jQuery way: $(".example").addClass("excluded");
2: if(".page-title:contains('Welcome')"){ is a valid if statement. use if ($(".page-title:contains('Welcome')")) {
$(document).ready(function() {
if ($(".page-title:contains('Welcome')")) {
$(".example").addClass("excluded");
} else {
}
});
$(document).ready(function() {
if ($(".page-title:contains('Welcome')")) {
$(".example").addClass("excluded");
} else {
}
});
.example.excluded {
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-title">Welcome to the world</div>
<div class="example">Is this excluded</div>
I am trying to delete the div when I click on it, yet I am unsure of how to go about this. Any help would be greatly appreciated.
HTML
<div onclick="fadeOut(this)"></div>
JavaScript
function fadeOut(i) {
????
}
Use:
function fadeOut(i) {
i.parentElement.removeChild(i);
}
You can use outerHTML its the inverse of innerHTML as in outerHTML pertains to only the element.
function fadeOut(i) {
i.outerHTML = ''; // deletes it from the DOM
}
And if you don't want to display it but keep it in the DOM
function fadeOut(i) {
i.style.display = 'none'; // hides the element
}
JSFIDDLE
Even you can directly do this:(If this is specific to current div.)
<div onclick="this.parentNode.removeChild(this);">xyz</div>
Using jquery you can do it as follow.
Script:
function deletediv(id) {
$("#" + id).remove();
}
html:
<div id="testdiv" style="background-color:Red; height:100px; width:100px;" onclick="deletediv(this.id)"></div>
So I have a class of div's that i want to be shown or hidden depending on a variable i get.
I have this code:
**HTML**
<div class="div_estado" >
testing that
</div>
<div class="div_estado" >
testing this
</div>
**JS**
$(document).ready(function(){
var estado= 4; //instead of 4 i have "<?php echo $_GET['estado']; ?>" but let's supose its' value is 4
if (parseInt(estado)==5)
{
$('.div_estado').show; // not working
}
else {
$('.div_estado').hide; // not working
}
});
However it doesn't work properly, can you help me solve this?
DEMO
hide and show are methods, not properties. The syntax for invoking a JavaScript function requires a set of parentheses after the function name.
$('.div_estado').show();
$('.div_estado').hide();
Updated JSFiddle
FIDDLE
You should use "show()" and not just "show". Check the jQuery API info here.
$(document).ready(function(){
var estado= 4; //instead of 4 i have "<?php echo $_GET['estado']; ?>" but let's supose its' value is 4
if (parseInt(estado)==5)
{
$('.div_estado').show(); // not working
}
else {
$('.div_estado').hide(); // not working
}
});
You are forgetting () . It is a function not a property. Please change it to...
$('.div_estado').show();
...
$('.div_estado').hide();
You are simply missing brackets, it is show() and hide().
Use CSS to hide div
div.radio {
display:none;
}
IN JS Show div on load
$(document).ready(function () {
$('div_estado').show();
});
http://jsfiddle.net/bUjx7/42/
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'>
</script>
<script type='text/javascript'>
$(document).ready(function () {
$('.fieldreplace a').click(function () {
$('#fieldmatch, .fieldgame').hide();
var region = $(this).data('region');
$('#' + region).show();
});
});
</script>
I'm trying to make it so clicking one link will replace content in all the cells, and not, as it is, in just one cell.
Help?
You can replace the contends of all tds like?
$('#tableId td').html('content to update on all cells');
There are several problems in your code.
I see you have specify id="fieldgame1" many times, remember id should be unique for every element.
You would make use of class selector instead of id selector for selecting all elements.
Now, you would make the cell content with different classes, and use class selector to hide/show them.
HTML
<div class="fieldmatch" >2-5</div>
<div class="fieldgame1" >1-6</div>
<div class="fieldgame2" >6-1</div>
<div class="fieldgame3" >2-5</div>
Css
.fieldgame1, .fieldgame2, .fieldgame3 {
display:none;
}
JavaScript
$(document).ready(function () {
$('.fieldreplace a').click(function () {
$('#fieldmatch, .fieldgame').hide();
var region = $(this).data('region');
$('#' + region).show();
});
});
Code example on : http://jsfiddle.net/bUjx7/44/
So I have a toggled div with an image inside of it that toggles the scrolling of the next div:
<div class="section">
<img src="on.png"> Stuff </div>
<div class="under" style="height:302px;"> Hi </div>
Here's the JQuery for it:
$(".section").click(function(){
$(this).next('div').slideToggle(1200);
});
How would I make it so on the click function for my div, it toggles the image to "off.png"? And if the src is "off.png", it toggles to "on.png"? Thanks. (Sorry I'm still a noob at JQuery)
$(function(){
$(".section").click(function(){
$("img").attr('src',
($("img").attr('src') == 'http://www3.picturepush.com/photo/a/2772891/64c/png/power-off.png?v0'
? 'http://kiwianon.com/forums/Themes/Simple_Green/images/on.png'
: 'http://www3.picturepush.com/photo/a/2772891/64c/png/power-off.png?v0'
)
)
});
});
demo
$(".section").click(function(){
var img = $(this).find("img").eq(0); //add an Id to your img tag so you can refine this selector.
if(img.attr("src") == "on.png")
{
img.attr("src","off.png");
}
else{
img.attr("src","on.png");
}
$(this).next('div').slideToggle(1200);
});
Ken, this is very simple! Just use the code below:
$('.section').click(function(){
var currentimg=$(this).find('img').attr('src');
if(currentimg=="off.png"){
$(this).find('img').attr('src','on.png');
}
else{
$(this).find('img').attr('src','off.png');
}
});
Use $(selector).attr("src", "theImageFilePath") to change the image.
The state could be represented in several ways, including global/module variable, $(selector).data(...), or simply by checking the current value of the "src" attribute.