Why isn't is the drop down menu working - javascript

I wanted to know why isn't the drop down menu working. When I click on the drop down menu it does not appear. I am using bootstrap. Please tell me why it isn't working.
<li id="megamenuID" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Categories
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<div >
<div class="row">
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-4 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
</div>
</div>
</li>
</ul>
</li>


Have you included in the header the bootstrap.js script file? The main reason why it won't work is because you either haven't included it, or you miss-typed something.
Can you show us what scripts you have included?
And also, please run the page on Mozilla (if possible), open the console and post the screenshot here. We will be able to see if there is any javascript problem.
EDIT: (based on OP first comment)
As far as I can see, you have included <script src="Scripts/jquery-1.9.1.js"></script>, but have not included the bootstrap.js file.
Include it like this: <script src="Scripts/bootstrap.js"></script> and it should be working. (of course, if the bootstrap.js is located in the Scripts folder. If it is in another folder, change the path properly.)
If this won't work again, do a screen shot from the Mozilla console only, and show us what is going on there.
EDIT 2: (based on OP first comment)
Also, remove one of these two:
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
You either want to use the bootstrap.min.css which is minified and for huge css files is better to use min version so it won't create a lot of trafic, or you will use the non-minified version i.e. bootstrap.css.

Related

Setting next and previous href

I am facing some problem what i have now is there are images render in a div and and there anchor tag inside div when user clicks on image
an overlay screen will open where i have to display pdf files i have used TouchPdf plugin now what i want is there will be arrows buttons on overlay screen which will navigate to next pdf file and displayed on overlay screen.I am getting difficulty in achieveing this Thanks All
this how images are rendered
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div class="image-div-conents">
<h3 class="circle">BI</h3>
<div class="doc-name-date">
<!-- <ul class="list-inline"> -->
<span class="bill">Bill</span>
<span class="bill">2-02-2017</span>
<!-- </ul> -->
</div>
</div>
<a href="#">
<img height="300px" class="img-responsive" src="http://i156.photobucket.com/albums/t20/warjhenz/1000x1000.gif" alt="">
<div class="validitity"><span>Validitity: Forever</span></div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div class="image-div-conents">
<h3 class="circle">BI</h3>
<div class="doc-name-date">
<!-- <ul class="list-inline"> -->
<span class="bill">Bill</span>
<span class="bill">2-02-2017</span>
<!-- </ul> -->
</div>
</div>
<a href="#">
<img height="300px" class="img-responsive" src="http://i156.photobucket.com/albums/t20/warjhenz/1000x1000.gif" alt="">
<div class="validitity"><span>Validitity: Forever</span></div>
</a>
</div>
this will continue and images are rendered horizontally
What i have tried is--
Add click event
$('.thumb a').on('click',function(){
alert($(this).attr('href'));
alert($(this).index());
});
but index is always 1 for each href as there are seprate div's and there is only anchor tag inside it.

You need to create a topmost parent element which has all the divs
You can create a div
<div class="parent> all your divs etc </div>
$('.thumb a').on('click',function(){
alert($(this).parentsUntil("thumb").index()); //Here the index will be the clicked index.
});

The problem is you are using
The problem is that tha click event is on a tag and # takes to top of the page.You should always use javascript:void(0).

Replace the href to something else using jQuery or javascript

This is the HTML i have and i want to change the href attribute from http://google.com to something else, please note that this link should not be changed http://google.com/home/inner_links. I cannot edit the html so looking for a solution using jQuery or Javascript. Thanks.
<div class="branding">
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu">
<ul><li</li></ul>
</div>
</div>

Problems with the code fragment
First off, it is not a full document but a code fragment, as such it doesn't include appropiate headers. We can disregard this understanding that the provided code belongs to a larger document.
The following problems are present in such code fragment:
The img tags require a non-empty src attribute and a alt attribute.
The a tags require a valid url value in their href attribute.
There doens't seem to be a closing tag for <a href="http://">
And finally thig thing that doesn't make sense <li<a href="http://google.com/home/inner_links">
Now, this is beyond the question, but given that you have the following fragment:
<div class="main-menu">
<ul><li</li></ul>
</div>
We can see that you have closing li and ul tags. So I would expect that you were trying to do as follows:
<div class="main-menu">
<ul><li></li></ul>
</div>
Solution
The code I'm suggesting to use to edit the href values is the following:
$('.branding').find('img').parent().attr('href', 'newhref');
That is selecting the parents of all the img that are inside elements with class "branding", and setting the href attribute of them.
Demo with original code fragment
$('.branding').find('img').parent().attr('href', 'newhref');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="branding">
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu">
<ul><li</li></ul>
</div>
</div>
Demo with the code fragment and suggested fixes
$('.branding').find('img').parent().attr('href', 'newhref');
<!DOCTYPE html><head><title>demo</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<div class="branding">
<a href="http://google.com">
<img src="http://lorempixel.com/100/100/" alt="" class="preload-me"/>
</a>
<a href="http://google.com">
<img src="http://lorempixel.com/100/100/" alt="" class="preload-me"/>
</a>
link
<div class="main-menu">
<ul><li>link</li></ul>
</div>
</div>
Notes: In addition to the fixes, I have create a complete document from the fragment, set the title to "demo", used lorempixel for the images, set the invalid url to http://example.com and added the text "link" to the anchors to ease the demo.

jquery:
$('.branding a').attr('href', YOUR VALUE)
or
$('a[href="http://google.com"]').attr('href', YOUR VALUE)

The html at Question is invalid.
<div class="branding"> <!-- 1) where is closing tag for this `DIV` element? -->
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu"><!-- 2) where is closing tag for this `DIV` element? -->
<!-- `UL` is not permitted child of `A` element -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a -->
<ul><li</li></ul>
</div><!-- is this closing `DIV` tag for 1) or 2) ? -->
That should be changed before changing the href at the invalid html. If you cannot change html yourself, you should ask whomever supplied the html why it is delivered invalid; and ask that it be changed to valid html before proceeding.
Then adjust href of <a> elements.

jquery:
$(document).ready(function() {
$("img").parent().attr("href", some url);
});

Here a sample code- I had a similar requirement in my project.. you can change based on your need.
Note: alert() - is for demo purpose only.
$(document).ready(function(e) {
var currentUrl= $("a").attr('href');
newEditUrl = currentUrl.replace("http://google.com", "http://google.com/home/inner_links");
alert(newEditUrl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="branding">
<a href="http://google.com">
<img class=" preload-me" />
</a>
<a href="http://google.com">
<img class=" preload-me" />
</a>
<a href="http://">
<div class="main-menu">
<ul>
<li<a href="http://google.com/home/inner_links">
</a>
</li>
</ul>
</div>
Hope this helps.

Try something like this,
function changeHref(){
document.getElementsByTagName("a").href="Someplace.com";
}
Also, which link do you want to change specifically? Or do you want to change all of them?

HTML DIV Variable Bootstrap Display Issue

I am working on a bootstrap with node.js express project. Upon getting variables installed into the theme where the username is (as shown below), There is some sort of invisible gap in the viewing of the code.
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img id='picture2' src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span id="name" class="hidden-xs">Firstname Lastname</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img id='picture' src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p><div id="name2">Firstname Lastname</div>
<div id="companytitle"><small>Member</div>since<div id='signupdate'>Nov. 2012</small></div>
</p>
</li>
<!-- Menu Body -->
This image shows the original bootstrap before i added the multiple tags to change the text with ajax. As soon as i added the <div> tags, the visuals of the profile tab parted and started to look like the first image.
I am unsure of how exactly to get these items to align right on the page, as you can see, it almost appears that the data has some breaks in it.
Can anyone point me in the right direction to fix this?
Here is the original boostrap snipped for the profile tab
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->

Target="_self" not reloading page

I have my angular directive, and that is some div's with around it an but when I click on the div it doesn't reload my page.
Am I doing something wrong?
This is the full directive
<div class="col s12 m6 l4">
<div class="video-card">
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-image">
<img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" />
</div>
</a>
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-content">
<div class="card-title-box">
<a href="#/videos/detail/{{video.Id}}">
<span class="card-title grey-text text-darken-4">
{{video.Title}}
</span>
</a>
</div>
<div class="card-action">
<div class="more-info">
<span class="group grey-text">
{{ video.Author}}
</span>
<a href="#/groups/detail/{{playlist.Id}}/List/{{video.Id}}" ng-if="playlist">
<i class="mdi-av-play-arrow right tooltipped black-text small "
data-position="top" data-delay="0" data-tooltip="{{'video.playFromhere' | translate}}"></i>
</a>
</div>
</div>
</div>
</a>
</div>
</div>
I need to reload the page due to a bug in a plugin I'm using on the detail page, and nor the author of that plugin nor I can figure out what is happening, and the only way to get it work is to reload the page when going to a video.

You can reload a page in Javascript using window.location.reload()

Target only sets which frame the link should act on. So if you want the document to reload use
window.location.reload();

Semantic UI - links in dropdown nested menu won't work

I would like to implement links in nested submenus but it doesn't seem willing to work.
<div class="ui menu">
<div class="menu">
<div class="ui pointing dropdown link item">
<i class="dropdown icon"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Sub Menu</span>
<div class="menu">
<div class="header">Links</div>
<div class="item">Google</div>
<div class="item">StackOverflow</div>
</div>
</div>
</div>
</div>
</div>
</div>
The links in the submenu will not work (though links in the menu will).
Is this a bug or a "normal" feature. Has anyone find a way around this ?
Thanks a lot.

You don't need the div in the leaf menu item - try this under the links sub menu
<a class="item" href="http://www.google.com">Google</a>

Categories