I am building a website using Angularjs, also I am using an admin theme for bootstrap.
The theme works fine, but when I divide it in views (ng-view), the different javascript based parts stop working.
For example to open a modal window
<a href="javascript:;" class="primary-bg medium radius-all-2 display-block >btn basic-dialog">
<span class="button-content text-center float-none font-size-11 text->transform-upr">View Basic dialog example</span>
</a>
</div>
<div class="hide" id="basic-dialog" title="Basic dialog title">
<div class="pad10A">
Dialog content here
</div>
</div>
if I put this just in the index.html of the application it works fine, if I move it to an ng-view it doesn't work.
Related
I am making a news website using django and I am having trouble in rendering responsive images which are inserted in django-ckeditor at admin site of django.
Can anybody suggest me what might be the issue, following is my code:
template html
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<h4 >{{article.title}}</h4>
<div>
<img class=" center-align responsive-img" src="{{ article.thumbnail }}">
<p class="articlebody">{{article.body|safe}}</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
base.html
$(document).ready(function(){
$('.articlebody img').each(function(){
$(this).addClass('responsive-img');
});
});
</script>>
ckeditor at django admin rendered this HTML:
<p><img alt="nike shoe" src="http://www.nikeblog.com/wp-content/uploads/2017/06/Nike-VaporMax-Flyknit-NIGHT-4.jpg" style="float:left; height:563px; width:750px" /></p>
i just wanted to do this image responsive but my javascript code doest seems to work.could you read this?
I am trying to add the materializecss framework "responsive-img" class using jquery. But I don't see the effect on my template. The images inser``ted in cKeditor is still not responsive. Please help guys. I am new to web development.
For sample: please check the link http://plnkr.co/edit/Q3Z669FeRHqMORcQ9v6K?p=preview.
I am working in Visual studio 2013.
I am trying to hide or based on authentication, I want to show the menu. But ng-if not working outside the ng-view.
Actually ng-if is not coming with the intellisense. Though I pasted the code, I didn't get. But ng-hide is working.
I am getting the ng-hide. But I don't like to use ng-hide, because this will just hide the element. So using inspect element, we can enable the menu.
Why I am not getting ng-if? Am I doing in the wrong way
<div id="page-wrapper" ng-controller="indexController">
<div id="page-header" class="bg-gradient-9" ng-if="!authentication.isAuth">
<div id="mobile-navigation">
<button id="nav-toggle" class="collapsed" data-toggle="collapse" data-target="#page-sidebar" aria-expanded="false" aria-controls="navbar"><span></span></button>
</div>
<!--Logo for all the screen-->
<div id="mobile-navigation">
</div>
<div id="header-logo" class="logo-bg mobile-hidden">
<a href="#/" class="logo-content-big" title="">
</a>
<a href="#/" class="logo-content-small" title="NoteReport">
NoteReport
</a>
</div>
</div>
<div id="page-content-wrapper ">
<!--Partial loading of the content-->
<div class="angular-ngview-content" ng-view>
</div>
</div>
</div>
This is the ancient old issue if child scopes created by ng-if, try:
ng-if="!$parent.authentication.isAuth"
EDIT
The ng-if directive was provided after angular 1.1.5, you are using 1.0.5. Working plunk.
This is because of ng-if creating a child scope and how prototypical inheritance works with primitives.just check once like
ng-if="authentication.isAuth"
change angularjs version to 1.3.8...It will work
I'm new to angular, been trying to fix this for about an hour now but can't get it working. I have some html code:
<li class="notification-dropdown hidden-xs hidden-sm">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
...
The notification pop-dialog is hidden by default and the following JQuery shows it when the .notification-dropdown is clicked
$(document).on("click", ".notification-dropdown", function (e) {
e.preventDefault();
e.stopPropagation();
// hide all other pop-dialogs
$(".notification-dropdown .pop-dialog").removeClass("is-visible");
$(".notification-dropdown .trigger").removeClass("active");
var $dialog = $(this).children(".pop-dialog");
$dialog.toggleClass("is-visible");
});
For some reason, this code does not work when I put the html into AngularJS's ng-view loaded as a partial into a main html document.
I've already loaded the JQuery lib before Angular.
I've tried to shorten the code for simplicity, I can show more code if needed.
Best try to avoid using jQuery with AngularJS completely. Using both together in this fashion is a common mistake among those new to Angular, coming form a jQuery background. Here is a great answer on that topic: "Thinking in AngularJS" if I have a jQuery background?
You could just use ui bootstrap´s dropdown.
Alternatively, there are ngShow and ngIf. If you still want to use your own css class to hide it, just set the class with ngClass.
Then, you can use ngClick to recieve the click event.
Here is how it would look (HTML only, you dont even have to write any JS for this):
<li class="notification-dropdown hidden-xs hidden-sm" ng-click="showDialog = !showDialog">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog" ng-show="showDialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
<!-- body content -->
</div>
</div>
</li>
EDIT : Added Code
EDIT : working plunk
I'm currently making a website for a university project where I'm using a piece of Javascript ( http://buildinternet.com/project/supersized/ ) in order to generate a background that is a gallery of several images.
I'm trying to set the site so that it will display a single image as the background in the event of Javascript being turned off, but the navigation elements of this slideshow are generated using HTML code outside of the script tags and inside the body tag.
Is there a way I can set this HTML code so that it will only be included when Javascript is active, leaving the screen clear of the navigation controls when it isn't?
At request the code I'm trying to isolate is the Div tags being called below.
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<!-- <a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<!--<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
Like #jumpingcode mentioned, you would want to hide the controls in question with CSS, and show them with JavaScript.
Hide the div with CSS:
#controls-wrapper {
display:none;
}
Then show it in your page with jQuery:
$('#controls-wrapper').show();
Or use .css() to have more control over what type of display property to use:
$('#controls-wrapper').css('display', 'block');
I have what should be a very simple modal using Twitter Bootstrap 3. The modal displays no problem, but it doesn't fade in from the top, as it does in this example, http://getbootstrap.com/javascript/#modals. Instead, it just plonks itself on the screen.
Here's the trigger:
<a href='#registerEmail' data-toggle='modal' class='btn btn-primary btn-lg'>Sign up with Email</a>
Here's the modal:
<div class='modal fade' id='registerEmail' tabindex='-1' role='dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
This is the header
</div>
<div class='modal-body'>
This is the body
</div>
<div class='modal-footer'>
This is the footer
</div>
</div>
</div>
</div>
I am pretty sure that it was working before.
I checked out this other answer, Twitter Bootstrap: Modal popup won't fade, where the modal was nested within another .fade class, but that's not the case with my code above.
Also, I'm including the entire bootstrap javascript file (at the bottom of the page) so this can't be the problem. I am loading jQuery too (before the bootstrap js).
EDIT:
This is bizarre. In the process of creating a JS fiddle I went through and eliminated extraneous elements in the page, one at a time. When I commented out a line so that my own site-wide.js would not load in the document head, the problem ceased. I then restored the line that includes site-wide.js, but I can't recreate the problem???
Firstly, thanks for the comments above.
In the end I commented out some unnecessary javascript includes and that solved the problem. Presumably it was a namespacing issue? Interesting to see that it could manifest in such a subtle manner.