i need some help to make a button for enable or disable 2 div with jquery. i have 2 kind of navigation code in my page. these are my codes:
First:
<div class="nextprev">
[prev-link]Previous[/prev-link]
[next-link]Next[/next-link]
</div>
Second:
<div id="page_navigation1" class="page_navigation1">[next-link]Next[/next-link]</div>
Now, i need some jquery code for enable or disable these div's. for example, when we click on enable button just first div will be working and when we click on disable, just second div will be working!
i hope u guys undrstand my question and im sorry for my bad english.
the toggle() function toggles the visibility of a div. so maybe something like this?
http://jsfiddle.net/UvWEu/17/
<script type="text/javascript">
function toggleDivs() {
$("#nav1").toggle();
$("#nav2").toggle();
}
</script>
<div id="nav1"
style="background-color:red;width:50px;height:50px;display:none;">nav1
</div>
<div id="nav2"
style="background-color:green;width:50px; height:50px;display:visible;">nav2
</div>
<button text="toggle" style="width:50px; height=18px" onclick="toggleDivs();" />
Related
here is my div code and my file type is .php
these are div elements that I want to hide.
i use different methods with id and class also with javascript but my issue is not resolved
<div class="qamar-container">
<div class="content-section">
<h1>AB & MIB Traders</h1>
</div>
<div class="button-section">
<button>AB</button>
<button>ABC</button>
</div>
</div>
</div>```
if need any other information please tell me.
here are the steps by which my issue is resolved.
CSS Styles
display:none;
}
javascript
jQuery('#qamar-ab').on('click', function(event) {
jQuery('#ab').toggle('show');
jQuery('#qamar').toggle('hide');
});
});
Anywhere I use a bootstrap button like Button it looks fine and how I want. However I am using the same button on another page within a jQuery UI div. So if I use the button the text is black (should be white) and the colour is off.
I do know I can overwrite the style manually but I'm just wondering does anyone know why this is happening in the first place? Is there anyway I can use the same line as I always do.
Here is an example of how it is written in my code:
<div id="tabs">
<form>
<div id="tabs-1">
<div class="form-control">
Button
</div>
</div>
</form>
</div>
.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}
.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}
.btn-success.focus,.btn-success:focus{color:#fff;background-color:#218838;border-color:#1e7e34;box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}
The code was working for me. But if its not working for you, then you can add the above code into the styling directly without removing bootstrap style link.This code does the same styling.
Thankyou
I need some help:
<button">Text</button>
<div class="show-on-button-click">Content</div>
<button">Text2</button>
<div class="show-on-button-click">Content2</div>
<button">Text3</button>
<div class="show-on-button-click">Content3</div>
I´de like to show content when the user clicks on the button. But it wont work, even all divs are shown, or it doesnt open and only the buttons are shown.
THX
You have to use some JavaScript/Jquery ;-
$(document).ready(function(){
$("button").click(function(){
$(".show-on-button-click").toggle();
});
});
Hope you solve it !!
I use sematic-ui css framework and load a modal with svg content.
The modal loads the first time after a page refresh half way the screen.
After clicking the modal link it a second time without a page refresh, the modal is on its correct place.
This happens with all the modals on the page.
When i display a png in the modal, with the same html and css, it behaves as expected, it is placed in the correct place.
Code of the modal an the javascript calling it:
<script type="text/javascript">$(document).ready(function() {
$('.ui.button.modal1456524726671605').click(function () {
$('.ui.modal.modal1456524726671605').modal('show')
});
});
</script>
<div class="ui small modal modal1456524726671605"><i class="icon close"></i>
<div class="header ui">Window title</div>
<div class="content">
<figure>
<embed src="../static/img/charts/1456524726671605hnxiwhkc.svg" type="image/svg+xml" width="100%"/>
</figure>
</div>
</div>
I could not find out what is causing this behaviour, so maybe one of you have a clue for me!
Thanks in advance.
I'm work with kendo ui at html5, and I need some action happen each time the page is displayed.
Just for that is the "data-show" option, but it not work.
The function fire only at the first time and no more.
<div id="div1" data-role="view" data-show="alert(999)">
// The content of the div
</div>
The alert fire only one time.
Any Idea?
Thanks.
Try creating a JavaScript function which will handle the show event:
<div id="div1" data-role="view" data-show="div1Show">
</div>
<script>
function div1Show() {
alert(999);
}
</script>
Here is a short demo demonstrating the same: http://jsbin.com/abaveh/1/edit