I am hiding one div and showing another. But I can't hide first div when the second is block. I think that's because first is bootstrap and need to overwrite to display with !important to run display: none; correctly. But how can I use the it in Javascript.
function switchVisible() {
if (document.getElementById('main-card')) {
if (document.getElementById('main-card').style.display == 'none') {
document.getElementById('main-card').style.display = 'block';
document.getElementById('map').style.display = 'none';
}
else {
document.getElementById('main-card').style.display = 'none';
document.getElementById('map').style.display = 'block';
}
}
}
I tried 'none !important' but that doesn't work.
How about using Jquery much more simple. And it'll fix your problem.
$('body').on("click touchstart", "#Button1", function(e){
$("#main-card, #map").toggle();
});
you can use inline css style by jquery:
$('body').on("click touchstart", "#Button1", function(e){
$("#main-card).css("display","none");
});
inline css is nearly !import
Related
I want to toggle the white-space style of a tr element to normal when the tr is clicked. I've managed to take a function used for toggling colours and adapt this for my purposes, however I can only make the class change toggle once, and don't know how to change the this.style.background in line 3 to this.style.white-space, without breaking everything:
$(document).ready(function () {
$('tr').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('white-space', 'normal');
}
else {
$(this).css('white-space', 'nowrap');
}
});
});
I know this is fairly basic, however I've only started using JavaScript today, so if anyone could show me the solution and explain what needs to be done then I'd be very appreciative.
You just need to change the if condition so it depends on the value of white-space property:
$(document).ready(function () {
$('tr').click(function () {
var $this = $(this);
if($this.css('white-space') === 'nowrap') {
$this.css('white-space', 'normal');
}
else {
$this.css('white-space', 'nowrap');
}
});
});
You just need to use white-space for your ifstatements, and refactor those if statements. Fixed code below:
$(document).ready(function () {
$('tr').click(function () {
if($(this).css("white-space") == "nowrap") {
$(this).css('white-space', 'normal');
}
else {
$(this).css('white-space', 'nowrap');
}
});
});
Hopefully this helps!
I'm trying to highlight elements within a iframe with no success. I've tried using mouseenter/mouseleave with no success. It does not fire.
$('#iframe').contents().mouseenter(function (e) {
//var element = $(e.target);
var element = $(this);
$(element).addClass("highlight");
}).mouseleave(function (e) {
$(element).removeClass("highlight");
});
I've had better success with mousemove however it highlights the parents as well which I don't want.
var prevElement;
$('#iframe').contents().find('html').on('mousedown', function (e) {
e.stoppropagation()
//e.preventDefault - did not work either
var element = $(e.target);
if (prevElement == null) {
prevElement = element;
element.addClass("edit-element-selector");
}
else {
if (prevElement != element) {
prevElement.removeClass("highlight");
//prevElement.parents().removeClass("highlight"); did not work
element.addClass("highlight");
}
}
});
HTML
<iframe id="iframe" srcdoc="#Html.Raw(ViewBag.html)"></iframe>
The css rule for .hover is not visible in the context of the iframe.
Either use .css() to set style directly, add the css links or clone all styles in the main document into the iframe with jQuery.
Here is a working jfiddle which you should easily be able to copy.
http://jsfiddle.net/danmana/pMBw2/
My problem had 2 issues.
My css was wrong.
Wrong
.highlight :hover {
outline:4px solid #f00;
}
Right
.highlight {
outline:4px solid #f00;
}
Hover was bubbling up to the parents. Mouseenter and mouseleave worked however.
var $iframe = $("#iframe").contents();
$iframe.find('*').mouseover(function (e) {
$(e.target).addClass('highlight');
}).mouseout(function (e) {
$(e.target).removeClass('highlight');
});
Try jQuery Hover
$(function () {
var iContent = $('#iframe').contents();
iContent.find('#id_username').val("New Value!");
iContent.find('#id_username').hover(function () {
$(this).css("border", "1px solid red");
}, function () {
$(this).css("border", "1px solid #c4c7cb");
});
console.log(iContent.find('#id_username'));
});
jsFiddle
Sorry I guess I misunderstood the question. Here is an updated fiddle changing the value of a text input and changing border color on hover.
jQuery Script
This code works, But Is it possible to add 'options' inside the slideToggle method so that I toggle 'Show/Hide' text?
$(function() {
var container = $('div.container p'),
button = $('div#click');
container.hide();
button.on('click', function() {
if (button.text() == 'Show') {
button.text('Hide');
} else {
button.text('Show');
}
$(this).next().slideToggle(300);
});
});
http://jsfiddle.net/sachq/mt3duxzk/1/
You can go ahead and give this a try. You may also change the "complete" option to "start" if you want the callback to fire as soon as you click the button.
DEMO: HERE'S A FIDDLE
var container = $('div.container p');
var button = $('div#click');
container.hide();
button.on('click', function(){
container.slideToggle({
duration: 200,
complete: function(){
var txt = (button.text() === 'Show') ? "Hide" : "Show";
button.text(txt);
}
});
});
I can suggest better approach. The idea is that you should not hardcode your button texts into javascript code. It makes code very obtrusive and tightly coupled, because if you decide to change the text from "Show" to "Show more" you will have to modify javascript code as well. Instead you can have both labels in place but show only one at a time:
<div id="click"><span class="show">Show</span><span class="hide">Hide</span></div>
Javascript:
button.on('click', function () {
button.toggleClass('hide');
$(this).next().slideToggle(300);
});
and CSS:
div#click > span {
display: none;
}
div#click .show {
display: inline-block;
}
div#click.hide .hide {
display: inline-block;
}
div#click.hide .show {
display: none;
}
UPD. Apparently someone disagrees with me. But it is easy to see that the benefits of slightly increased amount of code are bigger then it might look at first. Approach described above is much more flexible then comparing text strings. Not to mention it also allows advanced styling of the buttons with images and other elements which could be problematic with hardcoded strings.
Demo: http://jsfiddle.net/mt3duxzk/3/
You can't do that, but you can simplify things to ternary operator.
button.text(function(_, txt){
return txt == "Show" ? "Hide" : "Show"
}).next().slideToggle(300);
I'm trying to change the background image of a div using an if/else statement after a user clicks a part of the page. With the code below, the div will collapse as intended, however the accompanying background image does not change.
$(document).ready(function() {
$(".titles-us").click(function() {
$(".map-us").toggle();
$(".map-tri").hide();
$(".map-can").hide();
$(".map-eur").hide();
if ($(".us-icon").css('background-image') === 'url("public/images/collapse-lg.png")') {
$(".us-icon").css({
'background-image' : 'url("public/images/expand-lg.png")'
});
}
else {}
});
});
You can always addClass() with jQuery. Add a class when the user clicks the element. And give that class a background attribute different from the background of the element without that class.
if ($(".us-icon").hasClass('collapsed') == false) {
$(".us-icon").addClass('collapsed');
}
// If you want to remove the background on second click:
else {
$(".us-icon").removeClass('collapsed');
}
In your css, you can add this:
.collapsed {
background-image: url("public/images/expand-lg.png")
}
You can have a setup like this adding/referring to a class
$(document).ready(function() {
$(".titles-us").click(function() {
$(".map-us").toggle();
$(".map-tri").hide();
$(".map-can").hide();
$(".map-eur").hide();
if ($(".us-icon").hasClass('img-collapse'){
$(".us-icon").removeClass('img-collapse').addClass('img-expand');
}
else{
$(".us-icon").removeClass('img-expand').addClass('img-collapse');
}
});
});
and in your CSS:
.img-collapse{
background-image : url("public/images/collapse-lg.png");
}
.img-expand{
background-image : url("public/images/expand-lg.png");
}
I'm not entirely sure why your original code isn't sufficing, but here's a working example you can use to compare:
$(".us-icon").on('click', function() {
var myEl = $(this);
var bgimg = myEl.css('background-image');
if( bgimg === "url(http://placehold.it/200x200)" ) {
myEl.css({ 'background-image' : 'url(http://placehold.it/100x100)' });
} else {
myEl.css({ 'background-image' : 'url(http://placehold.it/200x200)' });
}
});
( fiddle )
I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?
I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/
I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});
It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle
As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});