Here's my problem, I have a piece of jquery that works fine in modern browsers, but won't work in IE7.
The idea is when you click on one of the < A > tags, the div called "innerdetails" will open.
Here's my HTML:
<ul class="table">
<li>CLICK HERE</li>
<li>Techniques </li>
<li >3</li>
<div class="innerdetails">
Technical services, including MARC.
</div>
</ul>
Here's the offending Jquery code.
$(document).ready(function() {
$("ul.table li a").click(function() {
$(this).parent("li").parent("ul").children(".innerdetails").toggle();
alert ( $(this).parent("li").parent("ul").children(".innerdetails").length )
return false;
});
});
The interesting thing is that in the alert, IE7 returns "0" as length for .children(".inner-course-details")
Chrome returns "1"
The issue is likely due to the fact that this isn't valid HTML (a ul tag can't contain a div tag), so IE7 probably doesn't consider it part of the DOM tree.
To fix, try putting the div inside of an li tag (or just using an li tag instead), then .toggle()ing the li.
I don't know exactly why but if you change the children to find it works
$("ul.table li a").click(function() {
$(this).parent("li").parent("ul").find(".innerdetails").toggle();
alert ( $(this).parent("li").parent("ul").find(".innerdetails").length )
return false;
});
And the jsfiddle http://jsfiddle.net/6heVt/2/
Related
I am studying AngularJS by looking at the website http://campus.codeschool.com/courses/shaping-up-with-angular-js/contents and downloaded the videos, then going through the examples on my computer.
Everything went well until the video codeschool_1329.mp4, otherwise called "Shaping_Up_With_Angular_JS_Level_2b". The example works correctly when the logic for selecting the panels is in the HTML code, but when the logic is moved to a controller, it no longer works correctly. Thus I have the relevant HTML code:
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{active:panel.isSelected(1)}">
<a href ng-click="panel.selectTab(1)">Description</a>
</li>
<!-- Repeated for Specifications and Reviews -->
</ul>
</section>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<!-- Repeated for Specifications and Reviews -->
and for the JavaScript code I have:
app.controller('PanelController', function(){
this.tab = 1;
this.selectTab = function(setTab){
this.tab = setTab;
};
this.isSelected = function(checkTab){
return this.tab === checkTab;
};
});
exactly as in the video. The latter is with the Angular module and another Angular controller for the store.
With both Google Chrome and Firefox, when I click on the each of the tabs "Description", "Specifications" and "Reviews", the selected tab is highlighted, as in the video, albeit blue rather than dark purple, but the text that is supposed to be displayed below the selected tab does not show up at all. It looks as if there is some type of a problem with the isSelected function in PanelController with ng-show="panel.isSelected(1)", etc. in the lower part of the HTML code, although it appears to work correctly with ng-class="{active:panel.isSelected(1)}" when the tab is highlighted.
This works correctly when the logic for this is in the HTML code, as I said above, but no matter what I can do, I am unable to get this to work correctly when the logic is in PanelController.
There must be something simple that I am missing, and would be grateful to get this sorted out - many thanks.
<section ng-controller="PanelController as panel">
...
</section>
<div class="panel" ng-show="panel.isSelected(1)">
Only the section element is controlled by the panel controller, but you're trying to use panel.isSelected(1) out of that section. So that can't work.
Put the div inside the section, or wrap everything with another div and move ng-controller="PanelController as panel"to that wrapping div.
i try use ng-if, but angular no compile him. Look in test code:
<ul class="tmmenu-admin-tabs-builder-panel-answer">
<li class="tmmenu-admin-tabs-builder-panel-portlet" ng-repeat="answer in answers">
<div>
<span ng-repeat="question in questions">
<label ng-repeat="answer in question.answers">
<input type="checkbox">{{question.id}}.{{answer.id+1}}
<span ng-if="test()">ddd</span>
</label>
</span>
</div>
<textarea>{{answer.text}}</textarea>
</li>
</ul>
and function test:
$scope.test = function(){
console.log('d');
return false;
}
if run this page, we can see "ddd" in "Li" despite to test return false.
Next step, i replaced at "ng-if" "ng-show" :
<ul class="tmmenu-admin-tabs-builder-panel-answer">
...
<span ng-show="test()">ddd</span>
...
</ul>
And its working, "ddd" hide. Why ng-if not working where working ng-show?
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp).
Could be a scope problem, is there something in a child scope that might override the value for test? ng-if works fine for me (plunker). I assume that everything else is working fine, are you seeing 'd' in the console to show that your function is getting executed?
Try changing your tag to this to help debug and you should see that it is a function:
<span ng-if="test()">test is: {{test.toString()}}</span>
i did not found the answer i was looking for, so that why i'm creating this question. I have a div that shows another one on click but i need to hide it (the div that appears on click) after the user selects one of the options, how can i do that?
When user's click on "#showmenu" the div ".mob" appears, after clicking in one of the ".mob" li's the ".mob" div dissapears.
P.S: Sorry for my bad english.
HTML:
<div id="showmenu"><img src="images/mobile.png" /></div>
<div class="mob" style="display: none;">
<ul>
<a data-scroll href="#home"><li>INÍCIO</li></a>
<a data-scroll href="#servicos"><li>EU FAÇO</li></a>
</ul>
</div>
Code:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.mob').slideToggle("fast");
});
});
I dont have any idea of the bootstrap or jquery plugins you are using but based on what is given, i'd say this should work.
$(document).ready(function() {
$('#showmenu').click(function() {
$('.mob').slideToggle("fast");
$('.mob a').click(function () {
$('.mob').slideToggle("fast");
});
});
});
Point to note there is a performance issue here , i.e code could be optimized better to search for classes or elements within a specific div than the whole document
Should those really be <a> if you don't intend to go anywhere? Can they just be <li>?
After that I think you want to give id's to the <li> that you have and then create a function much like the one you did for $('showmenu').click... that would hide the .mob.
Or if the <li> all get treated the same, maybe give them all the same class and just have one function for the class.
I have 2 CakePHP pages. Both of them use angularjs. Here's a snippet.
/items/items.ctp
<div id="ng-app" ng-app>`
<div ng-controller="ItemController">
Add
</div>
</div>
the function showAddPopup is defined as follows
$scope.showAddPopup = function() {
$.colorbox({href:'/items/add/' + $scope.order.id,open:true,close : "x", onClosed:function(){}});
}
/items/add.ctp
<div id="ng-app" ng-app>`
<div ng-controller="AddController">
<h2>{{order.label}}<h2>
</div>
</div>
Now, when I click on the add link from items view, I get a popup with the contents of add.ctp. But the problem is that instead of showing order label say 'My Order', the h2 tag is showing {{order.label}}
When I open add view from a page that doesn't use angularjs I get a proper result. What am I doing wrong. Please help. I have already wasted many days on this.
Maybe opening the colorbox with setting iframe could be the solution, if the problem is nested ng-apps.
$.colorbox({inline:false; iframe:true;href:'/items/add/'...});
If you are using bootstrap then angular-ui would be a great choice for above scenario
I have a div element that I only want to be show when my list of items empty. So I put in the following(in haml):
#no-items.ng-cloak{ :ng_show => "items.length <= 0", :ng_cloak => true }
However, even after I've done that the element is still flashing on the screen. Then I saw Angularjs - ng-cloak/ng-show elements blink, but even after adding the following in my CSS, the blink still occurs.
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
Any ideas what I am doing wrong?
You can put ng-hide in the class without affecting how the JS will work once loaded. However, it is useful to put it there so that CSS takes it into account while waiting for the JS to load.
<div data-ng-controller="RoomsController">
<div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" >
Some text
</div>
</div>
Ensure the ng-cloak CSS shown above is being loaded at the beginning of your page.
This should be all you need to do:
<div ng-hide="items.length" ng-cloak>no items</div>
Sample fiddle.
None of the solutions worked for me. The only solution I found is the following:
In each controller, add:
$scope.$on('$viewContentLoaded', function () {
$scope.completed = true;
});
and in the html of each view , add ng-if="completed" to the topmost element. For example:
<div ng-if="completed">
Note: the problem is restricted to firefox and ui-router. There, ng-cloak is ignored and there is no css workaround. The only solution that worked for me is the one I gave above.
There's currently an open issue for this:
https://github.com/angular/angular.js/issues/14015
This workaround worked for me:
.ng-hide.ng-hide-animate {
display: none !important;
}