Been trying to swap 2 divs. When the button is clicked #profeditclick1, #profswitch1 should swap with #hideedit1. At the moment when the button is clicked all the divs just disappear. Thank for your help or guidance.
HTML:
<div class="cart_verwrap" >
<div class="cart_verbill" *id="profswitch1">
<div class="btn blue cartprof-btn l-btn txt_fff s16" id="profeditclick1">Edit</div>
</div>
<!-- hidden edit profile in css it set to display:none-->
<div class="cart_verbill" id="hideedit1">
</div>
jQuery:
$("#profeditclick1").click(function(e) {
e.preventDefault();
var content = $(this).html();
$('#profswitch1').replaceWith('<div id="hideedit1">' + content + '</div>');
});
UPDATE
Next attempt although doesnt seem to work. i have taken of the display:none and tried to hide it:
$("#hideedit1").hide();
$("#profeditclick1").click(function(e) {
e.preventDefault();
var content = $(this).html();
$('#profswitch1').replaceWith('<div id="hideedit1">' + content + '</div>');
$("#hideedit1").show();
});
I think this may help you. I have added some modification in your HTML.
Please check it and change it as you need.
jQuery('#hideedit1').hide();
jQuery('#profeditclick1').click(function(){
jQuery(this).hide();
jQuery('#hideedit1').show();
});
jQuery('#hideedit1 #save_edit').click(function(){
jQuery('#hideedit1').hide();
jQuery('#profeditclick1').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="cart_verwrap" >
<div class="cart_verbill">
<div class="btn blue cartprof-btn l-btn txt_fff s16" id="profeditclick1">Edit</div>
</div>
<!-- hidden edit profile in css it set to display:none-->
<div class="cart_verbill" id="hideedit1"> EDIT PROFILE CONTENT <button id="save_edit">Save</button> </div>
</div>
Related
I have two buttons, both without links, and want to add a link to one when the other is clicked. How can I make one button with an onclick give a link attribute to something else on the page? If not a button, maybe a div?
The following is my current code:
<div class="container">
<div class="jumbotron" style="background-color:#000000 !important;">
<img id="myImage" src="images/closed.png" style="width:100%">
<p id="texthere"></p>
<div class="container">
<div class="row">
<div class="col">
<button onclick="document.getElementById('myImage').src='images/open.png'" class="btn btn-primary active btn-block">Open Eyes</button>
</div>
<div class="col">
<button onclick="document.getElementById('myImage').src='images/closed.png'"class="btn btn-primary active btn-block">Close eyes</button>
</div>
</div>
</div>
Thank you in advance for your help.
*Edited to clarify and pose as a question.
I think you may be confused about how HTML links work. HTML has the a tag for elements that a user can click to go to a different URL. The (worse) alternative is to use an onclick handler to redirect the user by setting the value of window.location.
To make a button that creates a link on the page, put a script tag at the bottom of the body that attaches a listener to a button that, when called, places a link on the page.
<script type="text/javascript">
var button = document.getElementById('my-button'); // This button has to exist.
button.addEventListener('click', function() {
var link = document.createElement('a');
link.href = 'google.com'; // Or wherever you want the link to point.
document.body.appendChild(link);
});
</script>
While there are many ways to do what you want, without knowing what programming skills you have and what you want to see on the screen, perhaps this sort of structure would help you. Replace your current onclick handlers on the BUTTONs:
<button id="open" class="btn btn-primary active btn-block">Open Eyes</button>
<button id="close" class="btn btn-primary active btn-block">Close eyes</button>
<script>
document.getElementById("open").addEventListener("click", function() {
changeState('open');
});
document.getElementById("close").addEventListener("click", function() {
changeState('closed')
});
function changeState(state) {
document.getElementById("myImage").src = 'images/' + state + '.png';
var new_para = document.createElement("p");
var new_link = document.createElement("a");
new_link.setAttribute("href", "https://www.google.com/search?" + state);
var new_link_text = document.createTextNode("Search for '" + state + "'");
new_link.appendChild(new_link_text);
new_para.appendChild(new_link);
document.body.appendChild(new_para);
}
</script>
I am trying to show hide div blocks depending on the link on which it click. By default all div will hide. All helps are appreciated.
HTML Code -
<div class="singleFlights">
<div class="itinerarySummary">
<div class="itineraryMenu">
<ul class="list-inline">
<li>Flight itinerary</li>
<li>Fare rules</li>
<li>Baggage Information</li>
</ul>
</div>
<div class="itineraryPanel">
<div id="flight-itinery" class="itineraryPanelItem">
<!-- Content Here -->
</div>
<div id="fare-rules" class="itineraryPanelItem">
<!-- Content Here -->
</div>
<div id="baggage-info" class="itineraryPanelItem">
<!-- Content Here -->
</div>
</div>
</div>
</div>
<div class="singleFlights">
.....................
.....................
</div>
Requirements -
By default 'itineraryPanel' div hide.
If user click on 'Flight itinerary' link under 'itineraryMenu' the div 'itineraryPanel' will show (slide down)with 'itineraryPanelItem' item div. Others div '#fare-rules' and '#baggage-info' will hide. Same will be happen when click on Fare rules and Baggage Information also.
I try with -
$(document).ready(function(){
if($('.flightListing').length > 0){
$('.singleFlights').each(function(){
$('.itineraryMenu ul.list-inline li a').click(function(){
});
});
}
});
I am using bootstrap3. Note that I dont want to show 'itineraryPanel' div until user not click of any link. and after click 2nd time on same link open div slide up and hide.
Here is the live code after included of Vincent G codes - http://45.114.142.104/design//test/cloud/flight-listing-1-n.html
Here's a way to do it with jQuery and data-href elements
See this fiddle
$(function(){
$(".list-inline a").click(function(){
hrefId = $(this).data('href');
$('.itineraryPanelItem').slideUp();
if($(hrefId).is(':visible')){
$(hrefId).slideUp();
}else{
$('.itineraryPanel').show();
$(hrefId).slideDown();
}
});
});
EDIT
With multiples content, you have to use class instead of id
See this updated fiddle
$(function(){
$(".list-inline a").click(function(){
hrefClass = $(this).data('href');
$(this).parents('.singleFlights').find('.itineraryPanelItem').slideUp();
if($(this).parents('.singleFlights').find($(hrefClass)).is(':visible')){
$(this).parents('.singleFlights').find(hrefClass).slideUp();
}else{
$(this).parents('.singleFlights').find('.itineraryPanel').show();
$(this).parents('.singleFlights').find(hrefClass).slideDown();
}
});
});
I am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.
When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.
This is the jsfiddle I'm working with.
The webpage I'm working with is here.
Place where am i making the mistake.
The jQuery I'm working with so far looks like this
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
$('.question2').click(function(){
$('.new_member_box_display').load('#answer2');
})
$('.question3').click(function(){
$('.new_member_box_display').load('#answer3');
})
$('.question4').click(function(){
$('.new_member_box_display').load('#answer4');
})
});//end of ready
The HTML I'm working with looks like this :
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
</div>
<div class="clear" class="question"></div>
<div id="answer1">
1
</div>
<div id="answer2">
2
</div>
<div id="answer3">
3
</div>
<div id="answer4">
4
</div>
<div class="new_member_box_display" id="question">
Text will appear here when one of the tabs above is clicked
</div>
load() loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
FIDDLE
Here's a fiddle that does what I think you're looking to do. There are cleaner ways to do it, but this should work.
http://jsfiddle.net/PZnSb/6/
Basically you want to set the inner html of one element to the inner html of another, like this:
$('.question1').click(function(){
$('.new_member_box_display').html($('#answer1').html());
})
instead of this:
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
It seems you just want the text to change when you click, try this.
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').text($('.answer1 ').text());
});
$('.question2').click(function(){
$('.new_member_box_display').text($('.answer2').text());
});
$('.question3').click(function(){
$('.new_member_box_display').text($('.answer3').text());
});
$('.question4').click(function(){
$('.new_member_box_display').text($('.answer4').text());
});
});
http://jsfiddle.net/cornelas/PZnSb/7/embedded/result/
I am working on a site where I have 4 expandable divs using jquery's slide toggle. All works fine but I don't want more than 1 of those divs expanded at a time. In other words: when a div is expanded, other divs that are expanded should close. Accordion isn't an option I think because all the div's styling is different. Below is my code.
$(document).ready(function(){
// slidetoggles
$("#tgx-window").hide();
$("#tgx-button").show();
$("#tgs-window").hide();
$("#tgs-button").show();
$("#tgm-window").hide();
$("#tgm-button").show();
$("#tgl-window").hide();
$("#tgl-button").show();
$('#tgx-button').click(function(){
$('#tgx-button').toggleClass('closebutton');
$("#tgx-window").slideToggle();
});
$('#tgs-button').click(function(){
$('#tgs-button').toggleClass('closebutton');
$("#tgs-window").slideToggle();
});
$('#tgm-button').click(function(){
$('#tgm-button').toggleClass('closebutton');
$("#tgm-window").slideToggle();
});
$('#tgl-button').click(function(){
$('#tgl-button').toggleClass('closebutton');
$("#tgl-window").slideToggle();
});
HTML:
<a onclick="" class="show_hide" id="<?=strtolower($service['title']);?>-button"></a>
<div class="slidingDiv" id="<?=strtolower($service['title']);?>-window">
<?
$infoBox = '<h1>'.$service['subtitel'].'</h1>';
$infoBox .= $service['description'];
echo replaceTags($infoBox);
?>
</div>
It's a bit hard to answer this question without knowing your HTML but here is a solution I hope;
HTML (I presume):
<div id="tgx-window">tgx window</div>
<div id="tgs-window">tgs window</div>
<div id="tgm-window">tgm window</div>
<div id="tgl-window">tgl window</div>
<button id="tgx-button">Show tgx</button>
<button id="tgs-button">Show tgs</button>
<button id="tgm-button">Show tgm</button>
<button id="tgl-button">Show tgl</button>
JavaScript:
jQuery(function($) {
var $windows = $('#tgx-window,#tgs-window,#tgm-window,#tgl-window'),
$buttons = $('#tgx-button,#tgs-button,#tgm-button,#tgl-button');
$windows.hide();
$buttons.on('click', function(e) {
var $id;
e.preventDefault();
$buttons.removeClass('closebutton');
$id = $('#' + this.id.split('-')[0] + '-window');// Get window id
$windows.slideUp();
if(! $id.is(':visible') ) {
$id.slideDown();
$(this).addClass('closebutton');
}
});
});
You can see a working example here.
Use class instead of id of button and probably its parent .tgx-window
$('.tgx-button').click(function(){
$(this).toggleClass('closebutton');
$(this).closest(".tgx-window").slideToggle();
});
I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle
if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;
This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here
Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.
Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}