What I am trying to do is change the source of an image within some bootstrap tabs I placed in my HTML with the click of a button. Not sure where I am going wrong with this. When I run the code nothing will happen. No console errors are present either. The script is referenced externally at the top of my HTML. I would prefer to stay within the Javascript realm for the sake of learning.
HTML
<div id="vehicleModelFrame">
<button id="modelFrameButton1" type="button" onclick="showTrim1()"></button>
<button id="modelFrameButton2" type="button" onclick="showTrim2()"></button>
<button id="modelFrameButton3" type="button" onclick="showTrim3()"></button>
</div>
<div id="selectTrimTitle">
<h3>
Vehicle Trim
</h3>
</div>
<div id="vehicleTrimFrame">
<div class="trimSelector">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Trim 1</a></li>
<li><a data-toggle="tab" href="#menu1">Trim 2</a></li>
<li><a data-toggle="tab" href="#menu2">Trim 3</a></li>
<li><a data-toggle="tab" href="#menu3">Trim 4</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane active">
<img id="carLogo1" src="noimage.png" alt="carLogo">
</div>
<div id="menu1" class="tab-pane">
<img id="carLogo2" src="noimage.png" alt="carLogo">
</div>
<div id="menu2" class="tab-pane">
<img id="carLogo3" src="noimage.png" alt="carLogo">
</div>
<div id="menu3" class="tab-pane">
<img id="carLogo4" src="noimage.png" alt="carLogo">
</div>
</div>
</div>
</div>
JAVASCRIPT
function showTrim1() {
var imgback = document.getElementById("modelFrameButton1");
var imgsrc = document.getElementById("carLogo1");
if (imgback.style.backgroundImage == "url('JeepWrangler.png')") {
imgsrc.src = "jeep_wrangler.png";
}
}
Think about what will have to happen for your goal to be accomplished:
Your function has to be called when the button is clicked.
The function that is called has to find the img DOM element you're interested in.
The function has to change the src property of that img.
Here is how you'd do this:
document.addEventListener('DOMContentLoaded', function() {
var newSrc = 'http://lorempixel.com/400/200/sports/1';
var button = document.querySelector('button');
var img = document.querySelector('img');
button.addEventListener('click', function() {
img.src = newSrc;
});
});
<img src='http://lorempixel.com/400/200 '>
<button>Change src</button>
As for what is going wrong in your code, it's hard to say. Does showTrim() get called? Do your document.getElementByIds work? Does your if statement get hit? Etc.
Notes:
Try to adhere to these guidelines when asking questions.
It's really important to indent and format your code properly. It makes it much easier to understand and debug.
onclick is considered to be bad practice. addEventListener is the way to go.
I figured out what my issue was with this. The comparison operator I was using in my if statement was incorrect. Instead of using = I was using == which is apparently incorrect in my case. New code works just fine.
JAVASCRIPT
document.getElementById("modelFrameButton1").addEventListener("click", function showTrim1(){
var carImg = document.getElementById("carLogo1");
if (document.getElementById("modelFrameButton1").style.backgroundImage = "JeepWrangler.png") {
carImg.src = "Jeep_Wrangler.png";
}else{
alert(document.getElementById("modelFrameButton1").style.backgroundImage);
}
});
I did end up replacing my "onclicks" with event listeners as well. Thank you all for your help!
Related
So, I have a rich text editor, that lets me write html into a div.
<div id="editor" contenteditable="true">
#Html.Raw(Model.Text)
</div>
</div>
<div class="tab-pane" id="source">
<div class="textarea" id="editSource" contenteditable="true">
#Model.Text
</div>
</div>
I have a bootstrav nav-tabs that separate these two modes, I wanted to use javascript to set the content of the other editor div when swapping modes.
here are the tabs and the javascript I'm writing.
function editorClick() {
$('#editor').innerHTML = $('#editSource').innerHTML;
};
function sourceClick() {
$('#editSource').innerHTML = $('#editor').html();
};
</script>
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#edit" data-toggle="tab" onclick="editorClick();">Editor</a></li>
<li class="nav-item"><a class="nav-link" href="#source" data-toggle="tab" onclick="sourceClick();">Source</a></li>
</ul>
I'm not concerned about the logic yet as I haven't been able to test it. the javascript functions don't change the content of the other editors. so something is wrong.
with some assistance in the comments, thank you guys! I managed to get it working.
function editorClick() {
$('#editor').html($('#editSource').text());
};
function sourceClick() {
$('#editSource').text($('#editor').html());
};
Thanks for the help!
I am currently working on a website. The header is loaded into the main 'search' page using the .load() function from JQuery. However, when I try to iterate through the [href]'s in the page, it cannot find them because the loaded header links haven't been added to the DOM yet (presumably).
function getCurrentPage(){
var count = 0;
$(".navLinks").each(function() {
count+=1
console.log('this.href' + this.href)
console.log('windowloc' + window.location.href)
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
console.log('# of hrefs' + count)
}
This is a function I wrote to add a css class to the current page, but this loop wont work since it cannot find those on the DOM (the .navLinks class is added to all links thats from the loaded header.html file). Thanks for the help!
<header>
<nav class="top-bar nav-desktop">
<div class="wrap">
<div class="top-bar-left">
<div class="logo">
<img class="logo-image" src="repairrepo_logo-02.png" width="250" height="184"></img>
<p class="site-logo">DNA Damage and Repair Database</p>
</div>
</div>
<div class="top-bar-right">
<ul class="menu menu-desktop">
<li><a href="index.html" class = 'navLinks'>HOME </a></li>
<li>
<div class="dropdown">
<button class="dropbtn">BROWSE
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#" class = 'navLinks'>HUMAN </a>
<a href="#" class = 'navLinks'>MOUSE</a>
<a href="#" class = 'navLinks'>ARABIDOPSIS</a>
<a href="#" class = 'navLinks'>PLANT</a>
</div>
</div>
</li>
<li><a href="search.html" class = 'navLinks'>SEARCH</a></li>
<li><a href="download.html" class = 'navLinks'>DOWNLOAD</a></li>
<li><a href="help.html" class = 'navLinks'>HELP</a></li>
</ul>
</div>
</div>
</nav>
Here's the 'header.html' file that is added and appended to a div with id 'header' on the main search page.
you guessed it right,
it cannot find them because the loaded header links haven't been added to the DOM yet
.load() is asynchronous and has a callback that executes when it's done, that's where you should call your function :
$('#someDiv').load('someHtml.html', getCurrentPage);
note that you have to passe the function by reference ( wihtout () ) otherwise it will be executed before the load() is done.
This question already has answers here:
How to disable HTML links
(16 answers)
Closed 6 years ago.
I have a simple bootstrap wizard. I want to disable the next navigation link based on some condition. Can someone please tell me how to do it using jQuery or CSS or any other method.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search</li>
<li>Item Details</li>
<li>Add SPR</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display: none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
Thanks
the below code should work.
Basically it detects when the tab has changed, then it removes any disabled attribute that might exist. Then depending on the tab clicked there is an if statement that sets if the link can be clicked. After that if a disabled link is clicked, simply do nothing.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
$(".wizard a").removeAttr("disabled");
if(target == "#tab3"){
$(".next").attr("disabled","disabled");
}
else if(target == "#tab1"){
$(".previous").attr("disabled","disabled");
}
});
$(".wizard a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
Update: Use .prop('disabled',true) instead of .attr('disabled','disabled')
without seeing the rest of your code it's challenging to give an ideal answer for your situation, but you should be able to set a Boolean and check that before allowing the Next button.
You can also apply some CSS to make the button LOOK disabled as well.
var nextOK = true;
$('#mybutt').click(function(){
$('#nextA').prop('disabled',true).css({'color':'red'}); //display:none, or whatever.
nextOK = false;
});
$('#nextA').click(function(e){
if (nextOK) window.location.href = 'http://google.com';
else alert('Button disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search
</li>
<li>Item Details
</li>
<li>Add SPR
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First
</li>
<li class="previous">Previous
</li>
<li class="next last" style="display: none;">Last
</li>
<li class="next"><a id="nextA" href="#">Next</a>
</li>
</ul>
</div>
<button id='mybutt'>Disable Next Button</button>
With javascript in the browser, you need to wait before the Document Object Model has completely loaded before calling some functions that manipulate the HTML.
You can achieve that by adding a simple document.ready function.
You can then add your condition in the function direcly, or any other code manipulating the HTML.
And lastly, by adding an id to the element you want to use, it would make your life much more easier.
Here is a sample of what it could look like:
document.ready = function() {
//Your condition
if(42 >= 1){
//Select the element and make it point to a void
$('#nextLink').attr('href', 'javascript:void(0)');
}
}
Using javascript:void is a really cross browser solution and works of on older versions (like good old IE).
I have the following tab structure in the form of a form with a submit button on the second tab. Is it possible for the tabs to auto-change upon a certain condition?
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
It's pretty hard to answer this without knowing what condition you want or seeing any code apart from the HTML structure (and without any CSS).
I'm assuming clicking on the anchors will change tabs, so what you need to do is add ids to them:
<li><a data-toggle="tab" href="#menu1" id="tab1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2" id="tab2">Menu 2</a></li>
and then if you're using jQuery do something like:
if(/*whatever condition you want*/){
$('#tab2').click();
}
otherwise:
if(/*whatever condition you want*/){
document.getElementById('tab2').click();
}
What you're looking for is called a multi-step form or a form wizard.
There are multiple examples on google on how to achieve such a solution and many many many JavaScript and jQuery modules/libraries which provide such functionality.
one sample can be found at this JSFiddle by JQ Purfect using bootstrap wizard:
http://jsfiddle.net/JQPurfect/nGnbJ/2/
$(document).ready(function () {
$('#rootwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $percent = ($current / $total) * 100;
$('.bar').text($percent.toFixed(0) + '%');
$('#rootwizard').find('.bar').css({
width: $percent + '%'
});
}
});
window.prettyPrint && prettyPrint()
});
Or follow this one: https://www.npmjs.com/package/jquery-simple-wizard
You can use the bootstrap tabs javascript reference to manipulate tabs to do something based on a condition. You can see the javascript reference at http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp. If you are trying to show your tab then you should be able to just use something like the following:
$('.nav-tabs a[href="#menu2"]').tab('show')
Not knowing what condition you want to toggle the tab on I made a fiddle to show you with just a click function but you can use whatever fucntion you want to show the tab.
Here is a fiddle Fiddle
Hi Im building a menu and i need to detect the next move for the mouse. Currently im using event.relatedTarget and getting the event.relatedTarget.id of the next element. It worked until i had to make some modifications to my css in on my menu so i had to get rid of overflow: hidden; and use display: inline-block;. The thing that happens now is that the event.relatedTarget is an empty string except for when i pull the mouse fast down to my menu items. Ill post parts of the code and have the full thing on jsfiddle. any ideas guys?
link to the project
Navigation.top_links.on('mouseleave', function (event) {
var sub_wrapper = $('.sub-wrapper'),
target_id = event.relatedTarget.id;
console.log(event.relatedTarget.id);
console.log(event.relatedTarget.id);
if (target_id == 'got_me_sections' || target_id == 'got_me_products' || target_id == 'ind_sections' || target_id == 'ind_products') {
console.log('mouse down to items');
return false;
}
sub_wrapper.removeClass('sections').removeClass('products');
sub_wrapper.hide();
});
its much html so it gets kinda messy, sorry.
<ul id="top_nav">
<li class="first">sections</li>
<li>products</li>
<li>
<div id="nav_cart">
<div class="gfx-div-cart"></div>
</div>
</li>
</ul>
<div id="sub_nav">
<div id="sub_sections" class="sub-wrapper">
<div id="got_me_sections" class="top-space">
<div id="ind_sections" class="indicator"></div>
</div>
<div class="nav-items-wrapper">
<div class="nav-items-breadcrumb">
<ul class="breadcrumb">
<li class="bc first">sections</li>
<li class="bc last"> </li>
</ul>
</div>
<div class="nav-items">
<ul class="nav-items-list">
<li>item.Name</li>
</ul>
</div>
</div>
</div>
</div>
I solved this by adding css to the <div id="sub_nav">...</div>
i moved the container up a bit with negative margin-top: -4px;