Run below code as it is, Code is working fine but i want the same functionality without polluting angularjs code.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="newapp" ng-controller="newctrl">
<div ng-repeat="x in names">
<div data-ng-click="toggleCompanyArr(['nav_' + x.id])">This is id : {{x.id}}</div>
<div id="nav_{{x.id}}" style="display:none">{{x.firstname}} {{x.lastname}}</div><br><Br><Br>
</div>
</body>
<script>
var app = angular.module('newapp',[]);
app.controller('newctrl', function($scope){
$scope.names=[
{"id":"1","firstname":"Akhilesh","lastname":"Kumar"},
{"id":"2","firstname":"Aman","lastname":"Kumar"},
{"id":"3","firstname":"Mithilesh","lastname":"Kumar"}
];
$scope.toggleCompanyArr = function(val){
$("#"+val).toggle();
};
});
</script>
</html>
You don't need to use jQuery to show/hide div, you could simply use ng-show here.
For achieving this you need to add show flag on each element of the names collection (you don't necessary to add new show property to your collection, if you don't add show: false prop in your each names element, angular will take care of this), and toggle show flag on click of the element. Thereafter use x.show flag inside ng-show directive to show & hide div.
Basically on initial load x.show value either undefined or false so anyhow it is going to hide the all element content on load. When you click on element ng-click directive will flag to x.show = true and that element will get shown.
The other advantage behind this approach is, you could have state of your each element in its object.
Suppose you have akhilesh option selected then it will have {"id":"1","firstname":"Akhilesh","lastname":"Kumar", show: true}, & other will have show: false if those element are not clicked.
Markup
<div data-ng-click="x.show = !x.show">
This is id : {{x.id}}
</div>
<div ng-show="x.show">
{{x.firstname}} {{x.lastname}}
</div>
Reference link
Related
When I run init() and create an tinymce instance, I want to have some wrapping divs for styling purposes.
For example, imagine this is the initial DOM inside TinyMCE's iframe when the page starts up:
<html>
<body>
<div class="myWrapper">
<div class="myWrapperContainer">
--> User input area <--
</div>
</div>
</body>
</html>
Then when I get the user input content:
var userContent = tinymce.get("myTextarea").getContent();
I don't want the wrapper divs to be included in userContent. I just want the HTML inside the wrapper divs
How should I go about this?
So, I am trying to load picture from another page using Jquery .load(), now the element I am trying to load has multiple children element which also load on current page, now obviously I could hide those divs but first I want to know if there's way to only grab parent div and leave out children.
I have tried using parent() method but since .load() works differently, it didn't work as intended. (Unless I missed something)
$('#myNewDiv').load('/robots .heading-image');
Here's HTML code from the other page
<div class="heading-image" style="background-image:url(imagelinkhere.png)">
<div class="heading-image_cover">
<div class="left">
<div class="heading-image title">Heading Title</div>
<div class="heading-image desc">I am a desc</div>
</div>
<div class="right">
<div class="heading-image stat">Stat text</div>
</div>
</div>
</div>
That's the code I am using right now, but .heading-image has multiple child elements as mentioned above.
To sum up, I need to load only parent element and ignore all child elements of the div mentioned above without having to load those children on current page and hide them (If possible)
From what I understand, your goal seems to be to copy the empty div to a new page, while maintaining the background image associated with the <div> tag.
The simplest approach would be to add to a stylesheet in which both of the pages can reach. For example:
CSS
.heading-image{
background-image:url(imagelinkhere.png);
}
JavaScript
$('#myNewDiv').html("<div class="heading-image"></div>");
Then in the head of both HTML documents, have <link rel="stylesheet" href="style.css"> to point towards the correct stylesheet for both pages.
If you just want the empty <div class="heading-image"></div> you could use the load() complete callback to empty it:
$('#myNewDiv').load('/robots .heading-image', function(){
// new html exists in page now, 'this' is #myNewDiv element
$(this).find('.heading-image').empty();
});
If there are resources inside that element like images, videos etc that you don't want to load in page you could also parse the :
$.get('/robots').then(function(html){
var $hImage = $(html).find('.heading-image').empty();
$('#myNewDiv').html($hImage)
});
With all that said I don't see why you need to extract an empty element from another page and can't just do:
$('#myNewDiv').html('<div class="heading-image"></div>')
I want to hide some elements on the page that use the class 'd-md-block'.
Because of the important on the class definition i can not use jquery hide/show functions.
Example, i want an element to be visible on desktop
<div id="test" class="d-none d-md-block">Welcome User!</div>
The visibility works as expected.
Then when a user clicks a button i want to toggle the visibility (this fails due to the d-md-none class)
$('#btn').on('click',function(){$('#test').hide();});
$('#anotherBtn').on('click',function(){$('#test').show();});
Any idea how to fix this ?
There is a simple work around for showing and hiding the element in bootstrap-4. As d-none class assigns display: none !imporatant property, you can simply add and remove this class via JavaScript to simulate the hide and show operations. Something like this:
$('#btn').on('click', function() {
$('#test').removeClass('d-block')
});
$('#anotherBtn').on('click', function() {
$('#test').addClass('d-block');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div id="test" class="d-none d-md-block">Welcome User!</div>
<button id='btn'>Hide</button>
<button id='anotherBtn'>Show</button>
I find myself needing to change style of all elements that have an attribute in common (let's say a class name) when one of these elements is hovered. This is super easy to do with jQuery, like this:
$(function() {
$('.bookId4').hover( function(){
$(this).css('background-color', '#F00');
},
function(){
$(this).css('background-color', '#000');
});
});
Though I don't know how to achieve this with Angular. In this example, the elements that have the class .bookId4 are generated with Angular AJAX call, so I'd like to use Angular to create the hover effect as well. Thank you!
EDIT
To explain further, I will have many divs being generated with an AJAX call, and the div's that are in the same group will have the same class. This is the HTML code:
<div class="bookId{{ privateTour.booking.id }}"> <!-- Wrapper for hover effect -->
When one of the divs is hovered I want ALL of the divs (not only the div that is being hovered) with the same class (or some other value that they may have in common) to have a hover effect. My preferred way would be for Angular to search the whole page for all divs with a certain class name and apply a style to that class (to not have to for example generate tons of CSS for all the classes that were generated, which I'm not even sure it would work).
You can do that by using ng-mouseenter and ng-mouseleave directives, Here is the simple code, you can build on top of it to meet your requirements
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example73-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="">
<h1 ng-style="myStyle" ng-mouseenter="myStyle={'background-color':'blue'}"" ng-mouseleave="myStyle={'background-color':'none'}"">Hello World</h1>
</body>
</html>
You can apply simple css solution for hover, like
.bookId4:hover {
background-color: '#F00';
}
No need for angular or jQuery :-)
Yes I agree with using ng-mouseenter and ng-mouseleave.
I did a example hope can help you
https://embed.plnkr.co/Cxfv0I9IEfBhZYj8A3zS/
use ng-class, create one scope variable which is by default false.
when mouseEnter OR mouseLeave event occurs make it TRUE/False accordingly.
<style>
.bookId4{color: red;}
</style>
<span ng-mouseenter="ctrl.hovered()" ng-mouseout="ctrl.nothovered()" ng-class="{ 'bookId4' : ctrl.ishovered==true }">soemthing 1</span>
<span ng-mouseenter="ctrl.hovered()" ng-mouseout="ctrl.nothovered()" ng-class="{ 'bookId4' : ctrl.ishovered==true }">soemthing 2</span>
<span ng-mouseenter="ctrl.hovered()" ng-mouseout="ctrl.nothovered()" ng-class="{ 'bookId4' : ctrl.ishovered==true }">soemthing 3</span>
_this.ishovered =false;
_this.hovered = function(){
_this.ishovered =true;
}
_this.nothovered = function(){
_this.ishovered =false;
}
In the end I found using an ng-class condition to be the best solution, and a variable decides what group should be highlighted. This line that I initially tried using did not work correctly:
<div ng-class="hovering == privateTour.booking.id ? 'hl' : ''" ng-mouseenter="hovering = privateTour.booking.id" ng-mouseleave="hovering = 0"> <!-- Wrapper for hover effect -->
For some reason, only the hovered div was highlighted, so I had to send the signal to a variable using a function instead for it to have a global effect. I ended up using this code for the div wrappers:
<div ng-class="hovering == privateTour.booking.id ? 'hl' : ''" ng-mouseenter="setHover(privateTour.booking.id)" ng-mouseleave="setHover(0)"> <!-- Wrapper for hover effect -->
And I wrote this simple function in the scope:
$scope.setHover = function(bookId) {
$scope.hovering = bookId;
};
And here's the style for the highlight class .hl:
.hl {
background-color: red;
}
Thank you for everyone giving the lead of ng-mouseenter and ng-mouseleave!
I'm using jquerymobile. And on a list I have a filter. When a user types something in it filters great. However when I add more items to the list, then the filtering does not refresh.
Any idea how I can refresh the filtering? (re-filter the list?)
Thanks
Trigger a change event on the search input field like this after items are added to list.
$(".ui-input-search .ui-input-text").trigger("change");
A sample:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$("#btn").live("click",function(){
$("#list").append("<li><a href='#'>100</a></li><li><a href='#'>200</a></li><li><a href='#'>400</a></li><li><a href='#'>500</a></li><li><a href='#'>1000</a></li>");
$("#list").listview("refresh");
$("#page").trigger("create");
$(".ui-input-search .ui-input-text").trigger("change");
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div id="page" data-role="page">
<div data-role="header">
<h1>Test Page</h1>
</div>
<div data-role="content">
<ul id="list" data-role="listview" data-inset="true" data-filter="true">
<li>1</li>
<li>12</li>
<li>41</li>
<li>8</li>
<li>91</li>
<li>65</li>
</ul>
<a data-role="button" id="btn">Add more</a>
</div>
</div><!-- /page -->
</body>
</html>
Demo - http://pastehtml.com/view/bnl7lpe3o.html
Let me know if that helps.
Update for jQuery Mobile 1.4
The filter behavior has been separated out into a filterable widget. You can update your listview content and rerun the filter in one swipe:
$( ".listselector" ).filterable( "refresh" );
A nice benefit of this is that the list items are filtered immediately. You do not experience the visual glitch of seeing the items for a split second before they get filtered, as you would when manually triggering the input control.
See http://api.jquerymobile.com/filterable/#method-refresh
The code above would no longer work, because jQuery Mobile keeps track of the last text entered into the filter, and does not filter if the input has not changed. If you did want to trigger the input control, you would need the following hack to first clear the last entered input:
$(".ui-input-search input").attr('data-lastval', '').trigger("change");
But, please use the filterable function going forward.
I think the problem should be resolved with refresh method, but I am not sure:
$('#mylist').listview('refresh');
After updating the list view, adding the below code will refresh the contents so that it becomes visible :
$("#list").listview("refresh");
Besides using the previously mentioned listview refresh, take note that using jQuery's .show() on a listitem will cause display:block; to be added to the element's CSS. Because it takes precedence over jQM's ui-screen-hidden class, it interferes with the searchfilter's ability to hide items when they don't match.
So if you are adding items to the list by way of .show()/.hide() combos, use .css('display','') instead of .show().
My general order for adding new hidden items:
// 1. Clear display:none and display:block, if necessary, from the listitem
$(yourLI).css('display','');
// 2. Apply jQM formatting, such as corners and other CSS, to the entire listview
$(yourListView).listview('refresh');
// 3. Make sure the searchfilter runs on the new items without user intervention
$(".ui-input-search .ui-input-text").trigger("change");