We Keep Coding

Style not working on angular sidebar toggle button

I am new to Angular and installed ng-sidebar component through NPM, I have designed my sidebar:
component.html:
<ng-sidebar-container>
<ng-sidebar
[(opened)]="_opened"
mode="push"
autoCollapseWidth=500>
<div>
<!-- Sidebar-content goes here -->
</div>
</ng-sidebar>
<div ng-sidebar-content>
<router-outlet></router-outlet>
<a id="show-sidebar" class="btn btn-sm btn-dark" href="#" (click)="_toggleSidebar()">
<i class="fas fa-bars"></i>
</a>
</div>
</ng-sidebar-container>
Now, I have a toggle button above with id #show-sidebar, I want to apply left: 300px; on it when sidebar opened, for that I looked up the console and found an attribute on ng-sidebar tag as ng-reflect-opened, then I wrote the following style:
ng-sidebar[ng-reflect-opened=true] + div[_ngcontent-oer-c1] > div[_ngcontent-ocs-c0] a#show-sidebar {
left: 300px;
}
But it's not working! Any suggestions?
Note: Sidebar is toggling just to add style to toggle button.

This can be done by class binding, just make a class in your CSS as:
.toggled {
left: 300px;
}
As you have a property _opened in your .ts file which is Boolean so just add this to your desired element: [ngClass]="{toggled : _opened}".
Hope it will help :)

Problems with Angular button

I'm creating my first Angular app and ran into a couple things that I just can't figure out. Whenever I include this:
<button ng-hide="results.length === projects.length" ng-click="limit = limit +3; gotoBottom()">Show More</button>
Inside of my template the app refuses to load but if I paste it anywhere outside of the template it works fine. I'd like to keep the button inside the template if at all possible so what on earth am I doing wrong?
Also, I'd like that button to also scroll to the #footer div and the ng-click doesn't seem to run this bit code:
$scope.gotoBottom = function() {
$location.hash('footer');
$anchorScroll();
};
I've created a Plunker of my code that can be found here:
https://plnkr.co/edit/MP4Pp4WLcn5EFb3pTEXx

By "template" if you are talking about projects template. Here is what you need to do.
Explanation:
The projects template need to have only one root element, so I added a div to wrap your project listing and show more button.
<div>
<div class="cards" ng-init="limit = 3">
<div class="card" ng-repeat="project in projects | limitTo: limit as results">
<div class="card-image">
<img src="{{project.img}}" alt="{{project.name}}" />
</div>
<div class="card-copy">
<h2>{{project.name}}</h2>
<p>{{project.desc}}</p>
<p><i class="fa fa-location-arrow"></i></p>
</div>
</div>
</div>
<button ng-hide="results.length === projects.length" ng-click="limit = limit +3; gotoBottom()">Show More</button>
<div id="footer" name="footer"></div>
</div>
For auto scroll: inject $timeout service
Explanation:
You did not had any div named footer so I added one just below the show more button and added a 100ms timeout, so that after your 3 projects load, it will scroll to the footer div. $timeout is very necessary because need to first render your projects and then scroll.
$scope.gotoBottom = function() {
$timeout(function() {
$location.hash('footer');
$anchorScroll();
}, 100);
};
Working Plunker: https://plnkr.co/edit/U3DDH57nh0Mqlpp2Txi4?p=preview
Hope this helps!

change the below code in projects.js
angular.module('portfolioApp')
.directive('projects', function() {
return {
templateUrl: 'projects.html',
controller: 'mainCtrl',
replace: true // remove directive tags
};
});
to
replace: false
it should do the trick. Plunker Link here

Jquery script is it possible to make smaller or more effecient

Ok so I have a webpage with six icons followed by a header and button for each. Currently I have it working as when you hover over img-1, header-1 and button-1 all hover the same color so on for the following. I was wondering as my jquery im still new and havent mastered it by any means but I call out every single change I want, I was wondering if there is a way to consolidate it or make it easier if I want to change it but still have it hover and change colors to the corresponding divs
Ive set up a snippet of what I have on jfiddle an as you can see on my jquery list i have a long list of stuff doing the same thing
Thanks any tips or tricks would be greatly appreciated to help me in any future sites I write
http://jsfiddle.net/udegrbnr/
<div style="width:50%;float:left;">
<div class="container-1">
<div class="visible-1 upgradea-1 upgradea imgnone-1"><img src="http://placehold.it/250/000000/000000" alt=""></div>
<div class="hidden-1 upgradea-1 upgradea otherimg-1"><img src="http://placehold.it/250/db232b/000000" alt=""></div>
</div>
<h3 class="upgradea upgrade otherimg" style="text-align: center;">Upgrade Alert</h3>
<div class="aligncenter"><a class="button small button custom fusion-button button-flat button-square button-small button-custom button-1 buttonshadow-no button-upgrade otherimg" target="_self" href="#"><span class="fusion-button-text">Learn More</span></a></div> </div>
<div style="width:30%;float:left;">
<div class="container-1">
<div class="visible-1 contracta contractnone-1"><img src="http://placehold.it/250/000000/000000" alt=""></div>
<div class="hidden-1 contracta contractimg-1"><img src="http://placehold.it/250/344da1/000000" alt=""></div>
</div>
<h3 class="contracta contractimg" style="text-align: center;">Contract End Alert</h3>
<div class="aligncenter"><a class="button small button custom fusion-button button-flat button-square button-small button-custom button-3 buttonshadow-no contracta contractimg" target="_self" href="#"><span class="fusion-button-text">Learn More</span></a></div></div></div>
and here is all 6 divs i have for my jquery as i feel its alot and can be simplified hopefully
Like i have seen the "this" command but dont know if that could be applied
$(function(){
$(".upgradea , .button-upgrade").hover(function(){
$(".upgradea , .button-upgrade").toggleClass("changecolor");
});
$(".button-upgrade-1").hover(function(){
$(".button-upgrade-1").toggleClass("changecolor-1");
});
$(".flexa ").hover(function(){
$(".flexa").toggleClass("changecolor-2");
});
$(".contracta ").hover(function(){
$(".contracta").toggleClass("changecolor-3");
});
$(".mileagea ").hover(function(){
$(".mileagea").toggleClass("changecolor-4");
});
$(".warrantya").hover(function(){
$(".warrantya").toggleClass("changecolor-5");
});
$(".otherimg").hover(function(){
$(".otherimg-1").toggleClass("changeimg");
});
$(".otherimg").hover(function(){
$(".imgnone-1").toggleClass("hidden-1");
});
$(".fleximg").hover(function(){
$(".fleximg-1").toggleClass("changeimg");
});
$(".fleximg").hover(function(){
$(".flexnone-1").toggleClass("hidden-1");
});
$(".contractimg").hover(function(){
$(".contractimg-1").toggleClass("changeimg");
});
$(".contractimg").hover(function(){
$(".contractnone-1").toggleClass("hidden-1");
});
});

I don't see any reason not to use CSS for all of this. If you target the children of a hovered parent, you can style it however you like. For example:
.parent:hover h3, .parent:hover .child a {
color: red;
}
This CSS could absolutely be further cleaned up, there are a lot of redundant CSS rules and unnecessary containers, I just didn't want to stray too far from the example you provided.
http://jsfiddle.net/qk53a5q4/

Yes, re-think your CSS.
Instead of having a specific class for each hover/changeimg/changecolor state, have one class that states what the thing is then one class for each state.
HTML:
<button class="button-1 hover">Button 1</button>
<button class="button-2 hover">Button 2</button>
CSS:
.button-1.hover { /* styles */ }
.button-2.hover { /* styles */ }
jQuery:
$('.button-1, .button-2').hover(function() {
$(this).toggleClass('hover');
});

Collection-Repeat and $ionicModal Strange Behavior

I am making a directory app that comprises roughly 200 list items (employees). The app worked as intended using ng-repeat, however, it was sluggish to load. I switched to Collection-Repeat to take advantage of the speed boost but I am getting bizarre behaviors that I can't figure out.
The list items are rendering correctly, alphabetically with the category titles added successfully. The problem is, each list item has a ng-click attribute that opens an $ionicModal. The modal for each item opens, but the loaded data is incorrect.
When the modal opens, it starts at the bottom of the page - I can see the contents for half a second before it animates to the middle of the screen. To start, the loaded data is correct. As it animates, it switches to another employees data. I can't seem to figure out why. I'm new to angular/ionic so any pointers would be great. Thanks!
EDIT - Out of curiousity, I added a second ng-controller="ModalCtrl" ng-click="openModal();" to each element as a button. Clicking on the element does the usual - opens the modal with the wrong employee. Clicking on the newly created button however creates TWO modals (stacked on eachother) BOTH with the correct employee. Removing either instance to the ng-controller or ng-click puts me back at square one with only one modal of incorrect data. Why is this? Why does adding a second ng-click correct the problem (despite having two modals)?
EDIT - Here is a link to a codepen sample (dumbed down, but proves my issue: http://codepen.io/anon/pen/zijFv?editors=101
My HTML looks like this:
<div class="list">
<a class="item my-item"
collection-repeat="row in contacts"
collection-item-height="getItemHeight(row)"
collection-item-width="'100%'"
ng-class="{'item-divider': row.isLetter}">
<!-- ADDED BUTTON SEE EDIT COMMENT ABOVE -->
<button ng-if="!row.isLetter" ng-controller="ModalCtrl" ng-click="openModal();">Click</button>
<img ng-controller="ModalCtrl" ng-click="modal.show()" ng-if="!row.isLetter" ng-src="data:image/jpeg;base64,{{row.image}}">
<h2>{{row.title || (row.firstname+' '+row.lastname)}}</h2>
<p ng-if="!row.isLetter"><em>{{row.jobtitle}}</em></p>
</a>
</div>
My Modal HTML is this:
<header class="bar bar-header bar-lsi">
<h1 class="title">Contact Information</h1>
<div class="button button-clear" ng-click="closeModal()">
<span class="icon ion-close"></span>
</div>
</header>
<ion-content has-header="true" style="margin-top: 0px !important;">
<div class="list card" style="border-radius: 0px !important;">
<div class="item item-avatar item-text-wrap">
<img ng-src="data:image/jpeg;base64,{{row.image}}">
<h2>{{row.firstname}} {{row.lastname}}</h2>
<p>{{row.jobtitle}}</p>
</div>
<a href="tel:{{row.phone}}" class="item item-icon-left">
<i class="icon ion-iphone"></i>
{{row.phone}}
</a>
<a href="mailto:{{row.email}}" class="item item-icon-left">
<i class="icon ion-email"></i>
{{row.email}}
</a>
</div>
</ion-content>
And then I have my basic controller:
.controller('ModalCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})

I think the problem is that you aren't passing to the modal template any value. It's getting residual values. I see too that you are using too much ng-controller and ng-click in items list and what is inside it. I mean, if you use ng-click for A.item, you don't need to use ng-click for the image inside it.
Let's see some code:
<a class="item my-item"
collection-repeat="row in contacts"
collection-item-height="getItemHeight(row)"
collection-item-width="'100%'"
ng-class="{'item-divider': row.isLetter}"
ng-controller="ModalCtrl" ng-click="openModal(row);">
<img ng-if="!row.isLetter" ng-src="http://placehold.it/65x65">
<h2>{{row.title || (row.firstname+' '+row.lastname)}}</h2>
<p ng-if="!row.isLetter"><em>{{row.jobtitle}}</em></p>
</a>
As you can see, I've removed all ng-click and ng-controller inside A tag, and I've left only what is attributes of A tag. You can notice too that I pass the object row to the openmModal() function.
In controller, I've made next changes:
$scope.openModal = function(item) {
$scope.modal.row = item;
$scope.modal.show();
};
And in the modal template I've used modal.row as variable with the data from the item list touched. So in template I use it like this:
<div class="item item-avatar item-text-wrap">
<img ng-src="http://placehold.it/65x65">
<h2>{{modal.row.firstname}} {{modal.row.lastname}}</h2>
<p>{{modal.row.jobtitle}}</p>
</div>
<a href="tel:{{modal.row.phone}}" class="item item-icon-left">
<i class="icon ion-iphone"></i>
{{modal.row.phone}}
</a>
<a href="mailto:{{modal.row.email}}" class="item item-icon-left">
<i class="icon ion-email"></i>
{{modal.row.email}}
</a>
I've test it in your codepen and it works. Try it and tell me if it works for you.

Refresh an element so its new tooltip shows (in jQuery/Javascript)

I have an html element which is using bootstrap tooltip to show a title when hovering over it. However, when you click this element I'm changing the tooltip, but the new tooltip isn't showing until I remove the mouse from it and re-hover over the element again.
I want the tooltip to be shown instantly when said button is clicked. How can I achieve this? Is there a way to "refresh", in lack of better words, an html element?

try this way
Demo :
http://jsfiddle.net/dreamweiver/9z404crn/
$(document).ready(function() {
$('#example').tooltip();
$('#example').on('click', function() {
$(this).attr('data-original-title', 'changed tooltip');
$('#example').tooltip();
$(this).mouseover();
});
});
h3 {
margin-top: 50px;
}
<h3>
Sensors Permissions
<i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
Note:
Above logic works only with Bootstrap version 2.3.2 and below, however, the solution provided by #NabiK.A.Z's would work with the latest versions of Bootstrap lib.
Happy Coding:)

You can use this code:
var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
I test it with bootstrap 3.3.4
You can see it here:
http://jsfiddle.net/NabiKAZ/a4WwQ/1029/
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
$('.mytooltip').hover(function() {
$('.mytooltip').tooltip('show');
});
$('.mytooltip').click(function() {
var newTooltip = 'Changed this tooltip!';
$(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});
.cart {
overflow: hidden;
padding: 10px 3px;
background: yellow;
}
<div class="cart">
<a data-toggle="tooltip" title="add to cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<br>
<div>
<a data-toggle="tooltip" title="add to another cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/> Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

For me in bootstrap 4 this worked:
$("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()

It's 2021 and with Bootstrap 5(BS5) all answers on this here didn't help me. Most answers above updated the content of the $(element).parent().find('.tooltip-inner').html("This is a test"); generated by the tooltip plugin. However with BS5 the generated template for the tooltip has a unique ID which can be used to update the tooltip.
This example demonstrates a simple scenario: when the .copy_queue_id div is clicked, queue ID from its attribute is copied and hence the the tooltip is updated to notify the user
HTML Markup:
<div class="cursor-pointer text-primary copy_queue_id" data-queueid="123456" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to copy"> 123456</small>
JS - JQuery
$(document).on('click', '.copy_queue_id', function(){
let node = $(this);
let id = node.data('queueid');
navigator.clipboard.writeText(id);
let tooltipid = node.attr('aria-describedby');
$("#"+tooltipid).find('.tooltip-inner').html('ID Copied!!');
})
Tested & works in BS5
Hope this helps others :)

Sure you just have to change the tooltips text within the onclick event
$('.tooltip-inner').html("This is a test");
I've created a jsfiddle for you as a demonstration http://jsfiddle.net/a4WwQ/59/
Currently it will change all visible tooltips text which isnt really a problem since you arent going to show more than one at at a time. That being said, you should consider modifying the code to point to the closest tooltip.
hope it helps!

in case you are looking to refresh the contents;
$('#example').tooltipster('content', 'i am superman!');

2021, Bootstrap 5: update this property data-bs-original-title.
You can also use Razor / Blazor with this, like this:
var title = propExamples.FirstOrDefault(q => q.Key == selectedType.Id).Value;
<div class="col-sm-2">
<img class="zoom-on-hover cursor-pointer fit-image grayout"
src="/lib/bootstrap-icons-1.5.0/info-lg.svg"
data-bs-toggle="tooltip" data-placement="bottom"
data-bs-original-title="#title" />
</div>