This is the pagination plugin. I need a bit of help. I am trying to use an image for the prev and next buttons. I keep having issues with it. Has anyone any idea how I could go about doing this? Currently if I use an image it will display the prev/next button as [object HTMLImageElement].
Thanks in advance!
var methods = {
init: function(options) {
var o = $.extend({
items: 1,
itemsOnPage: 1,
pages: 0,
displayedPages:5,
edges: 2,
currentPage: 1,
hrefTextPrefix: '#page-',
hrefTextSuffix: '',
prevText: 'prev', //this is the prev button text. I want to replace this with imgLeft
nextText: 'next', //this is the next button text. I want to replace this with imgRight
ellipseText: '…',
cssStyle: 'light-theme',
labelMap: [],
selectOnClick: true,
onPageClick: function(pageNumber, event) {
// Callback triggered when a page is clicked
// Page number is given as an optional parameter
},
onInit: function() {
// Callback triggered immediately after initialization
}
}, options || {});
methods._appendItem.call(this, o.currentPage - 1, {text: o.prevText, classes: 'prev'});
methods._appendItem.call(this, o.currentPage + 1, {text: o.nextText, classes: 'next'});
As it's been said, you can just use CSS to theme the ".prev" and ".next" classes.
Then, depending on what you want to do, you just have to add a background image to that element, change the color of the text, etc.
.prev, .next {
color: #FF0000;
font-family: Arial, sans-serif;
display: inline-block;
}
.prev {
width: 50px;
height: 30px;
background: url('/my/image.jpeg') no-repeat center;
}
...
Related
well iam working on sortable angular ui-sortable plugin
https://github.com/angular-ui/ui-sortable
my goal :-muliselect item and sort them simultaneously.
well that can be done with muliselect library of this plugin but for that we have to manually first press and hold ctrl key and while selecting multiple item then release ctrl key now you can sort multiple items.
https://github.com/thgreasi/ui-sortable-multiselection
but i dont want user to manually press and hold ctrl key.
currently iam thinking i will trigger ctrl press key for some time and will trigger click on next item then sort the list.
i wasted lots of time on this idea but not seems working.am i doing it wrong?
Json data:-
var array = [
{
'item':1,
'superset':'true'
},
{
'item':2,
'superset':'false'
},
{
'item':3,
'superset':'true'
},
{
'item':4,
'superset':'false'
},
{
'item':5,
'superset':'true'
},
{
'item':6,
'superset':'false'},
{
'item':7,
'superset':'true'
},
{
'item':8,
'superset':'false'
},
{
'item':9,
'superset':'true'
},
{
'item':10,
'superset':'false'}
];
inside angular ng-repeat if i found superset key ==true for any item then i want its next adjacent item to be moved with it which have superset ==true.
I tried to implement your requirements with the plugins that you are using. But I couldn't get it to work. But I managed to get it working with this plugin: angular-drag-and-drop-lists.
It has a multiselection feature that was relatively easy to implement.
I copied the code from the multiselection demo(here) in their page and modified it according to your requirements.
Here is the working plunker: https://plnkr.co/edit/fq4ca0LlKbsfLtFifQ2s?p=preview.
Code:
HTML
<body ng-app="MyApp">
<div ng-controller="MyController">
<ul dnd-list dnd-drop="onDrop(model, val, index)">
<li ng-repeat="val in model.items"
dnd-draggable="getSelectedItemsIncluding(model, val)"
dnd-dragstart="onDragstart(model, event)"
dnd-moved="onMoved(model)"
dnd-dragend="model.dragging = false"
dnd-selected="val.selected = !val.selected"
ng-class="{'selected': val.selected}"
ng-hide="model.dragging && val.selected"
ng-init="val.selected=false">
{{ "Item " + val.item }}
</li>
</ul>
</div>
</body>
JS
var myAppModule = angular.module('MyApp', ['dndLists']);
myAppModule.controller('MyController', function($scope) {
$scope.model = {
items: [{
'item': 1,
'superset': true
}, {
'item': 2,
'superset': false
}, {
'item': 3,
'superset': true
}, {
'item': 4,
'superset': false
}, {
'item': 5,
'superset': true
}, {
'item': 6,
'superset': false
}, {
'item': 7,
'superset': true
}, {
'item': 8,
'superset': false
}, {
'item': 9,
'superset': true
}, {
'item': 10,
'superset': false
}],
dragging: false
};
/**
* dnd-dragging determines what data gets serialized and send to the receiver
* of the drop. While we usually just send a single object, we send the array
* of all selected items here.
*/
$scope.getSelectedItemsIncluding = function(list, item) {
item.selected = true;
if(item.superset) {
var index = list.items.indexOf(item);
list.items[index+1].selected = true;
}
return list.items.filter(function(item) {
return item.selected;
});
};
/**
* We set the list into dragging state, meaning the items that are being
* dragged are hidden. We also use the HTML5 API directly to set a custom
* image, since otherwise only the one item that the user actually dragged
* would be shown as drag image.
*/
$scope.onDragstart = function(list, event) {
list.dragging = true;
console.log(event);
if (event.dataTransfer.setDragImage) {
//event.dataTransfer.setDragImage(img, 0, 0);
}
};
/**
* In the dnd-drop callback, we now have to handle the data array that we
* sent above. We handle the insertion into the list ourselves. By returning
* true, the dnd-list directive won't do the insertion itself.
*/
$scope.onDrop = function(list, items, index) {
items = list.items.filter(function(item) {
return item.selected;
});
angular.forEach(items, function(item) {
item.selected = false;
list.items.splice(list.items.indexOf(item), 1);
});
index = index - items.length;
list.items = list.items.slice(0, index)
.concat(items)
.concat(list.items.slice(index));
$scope.$apply();
return true;
}
/**
* Last but not least, we have to remove the previously dragged items in the
* dnd-moved callback.
*/
$scope.onMoved = function(list) {
list.items = list.items.filter(function(item) {
return !item.selected;
});
};
});
CSS
/**
* The dnd-list should always have a min-height,
* otherwise you can't drop into it once it's empty
*/
.multiDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
/**
* An element with .dndPlaceholder class will be
* added to the dnd-list while the user is dragging
* over it.
*/
.multiDemo ul[dnd-list] .dndPlaceholder {
background-color: #ddd;
display: block;
min-height: 42px;
}
.multiDemo ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
margin-bottom: -1px;
padding: 10px 15px;
}
/**
* Show selected elements in green
*/
.multiDemo ul[dnd-list] li.selected {
background-color: #dff0d8;
color: #3c763d;
}
Hope this helps.
I am using magnific-popup to display an inline gallery (with custom HTML markup), precisely like the example here. This opens a gallery of custom markup, where you can click through 3 sets of avatar/name/location data. (Try the example or the code below and you'll see what I mean).
However, I can't find a way to open the second (or anything besides the first) element on an anchor click.
Has anyone used magnific-popup and and been able to open an inline element other than the first element?
HTML:
<button style="padding:20px;">Open popup</button>
CSS:
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
Javascript:
// Define data for the popup
var data = [
{
username: "Brad Frost", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
userWebsite_href: 'http://www.bradfrostweb.com', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png', // Prefix "_img" is special. With it Magnific Popup finds an element "userAvatarUrl" and replaces it completely with image tag.
userLocation: 'Pittsburgh, PA'
},
{
username: "Paul Irish",
userWebsite_href: 'http://paulirish.com',
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
userLocation: 'San Francisco'
},
{
username: "Chris Coyier",
userWebsite_href: 'http://css-tricks.com',
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
userLocation: 'Palo Alto, California'
}
];
// initalize popup
$('button').magnificPopup({
key: 'my-popup',
items: data,
type: 'inline',
inline: {
// Define markup. Class names should match key names.
markup: '<div class="white-popup"><div class="mfp-close"></div>'+
'<a class="mfp-userWebsite">'+
'<div class="mfp-userAvatarUrl"></div>'+
'<h2 class="mfp-username"></h2>'+
'</a>'+
'<div class="mfp-userLocation"></div>'+
'</div>'
},
gallery: {
enabled: true
},
callbacks: {
markupParse: function(template, values, item) {
// optionally apply your own logic - modify "template" element based on data in "values"
// console.log('Parsing:', template, values, item);
}
}
});
Add this to your magnificPopup function and this will open up the second item on click:
index:2,
Listed on the documentation here.
Example Codepen
Check out this Codepen:
http://codepen.io/mgo/pen/ykgjb
Or try my way of solving the problem: https://codepen.io/jnax/pen/RpyVxx
var clickedButton;
$('button').click(function(){
clickedButton = $('button').index(this);
}); //this indexing solution is obviously not the best for all situations
then, when the popup opens, goTo the corresponding index in the popup.
callbacks: {
open: function(){$('button').magnificPopup('goTo',clickedButton)}}
The problem with this is, the goTo action is visible although I suppose it could be masked by a css transition
Slight variation on the above worked for me
// Define data for the popup
var data = [
{
username: "Brad Frost", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
userWebsite_href: 'http://www.bradfrostweb.com', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png', // Prefix "_img" is special. With it Magnific Popup finds an element "userAvatarUrl" and replaces it completely with image tag.
userLocation: 'Pittsburgh, PA'
},
{
username: "Paul Irish",
userWebsite_href: 'http://paulirish.com',
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
userLocation: 'San Francisco'
},
{
username: "Chris Coyier",
userWebsite_href: 'https://css-tricks.com',
userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
userLocation: 'Palo Alto, California'
}
];
// initalize popup
$('button').click(function(){
let index = $('button').index(this);
console.log("button index",index)
$(this).magnificPopup({
key: 'my-popup',
items: data,
type: 'inline',
index:index,
inline: {
// Define markup. Class names should match key names.
markup: '<div class="white-popup"><div class="mfp-close"></div>'+
'<a class="mfp-userWebsite">'+
'<div class="mfp-userAvatarUrl"></div>'+
'<h2 class="mfp-username"></h2>'+
'</a>'+
'<div class="mfp-userLocation"></div>'+
'</div>'
},
gallery: {
enabled: true
},
callbacks: {
markupParse: function(template, values, item) {
// optionally apply your own logic - modify "template" element based on data in "values"
// console.log('Parsing:', template, values, item);
},
open: function() {
// Will fire when this exact popup is opened
// this - is Magnific Popup object
console.log("inside open",index)
},
}
});
});
I try to add content on the fly to a CarouFredSel slider. The content is inserted fine but CourFredSel does not recognize the new content. Is there a way to tell the slider that the slide count has changed?
jQuery(document).ready(function() {
jQuery('#carousel').carouFredSel({
items: 4,
direction: "left",
responsive: true,
infinite: false,
circular: false,
scroll: {
items: 2,
duration: 1000
},
next: {
button: "#slider-button-next",
key: "right",
onBefore: function () {
loadAdditionalContent();
}
},
prev: {
button: "#slider-button-prev",
key: "left"
},
auto: {
play: false
}
});
});
function loadAdditionalContent () {
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" />']);
}
Here is a fiddle that describes the problem: http://jsfiddle.net/bg0xyj8k/
there is nothing wrong with your code:
fix this in jsfidle: use external reference without https: http://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js
I did some changes in your code, did not understanding what are you trying to do there.
jQuery( "#slider-add-items" ).click(function() {
loadAdditionalContent();
});
function loadAdditionalContent () {
id++;
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" id="'+ id +'" />']);
}
http://jsfiddle.net/bg0xyj8k/2/
UPDATE
- be more precise when you are asking someting
FIX 1: insert at next click before fist visible element - http://jsfiddle.net/bg0xyj8k/3/
FIX 2: insert on last position of the slider when next clicked - http://jsfiddle.net/bg0xyj8k/4/ - result => infinite next click
I don't know how to center delete action icon in inline editing.
My setting action column is:
{
name: 'action',
width: 40,
align: "center",
editable: false,
formatter:'actions',
search: false,
fixed: true,
resize: false,
formatoptions: { keys: true, editbutton: false }
}
You need to play around with CSS to find the fix in your case. Try overriding jqGrid's CSS rules.
In general, if you have only 'Delete' icon in your column, following CSS rules will make it center aligned.
.ui-pg-div.ui-inline-del {
float: none !important;
}
span.ui-icon.ui-icon-trash {
margin: auto;
}
Although, its not a good practice to use '!important'.
If you want to do this for a particular grid, you can prepend grid id(say, list) to CSS rule like this:
#list .ui-pg-div.ui-inline-del{}
Here's my code:
$("#ticker-wrapper").rssfeed("http://news.hse.gov.uk/feed/", {
limit: 5,
linktarget: '_blank',
titletag: 'p',
snippet: false,
header: false,
date: false,
content: false
});
$('#js-news').ticker({
controls: false,
titleText: ''
});
Basically, a rssfeed is placed inside the wrapper, I then want .ticker to add a ticker effect to the items pulled through by the .rssfeed.
The problem seems to be that the .rssfeed creates the id #js-news (which is where I want to apply the .ticker). Then it seems the .ticker gets fired before #js-news has been created. Effectively it seems to be trying to apply .ticker to the element which hasn't yet been created which then results in nothing appearing.
I've been looking into jQuery .live() and I can get all the code working on a click command. But I need to create the rss feed and apply the ticker when the page loads. Not quite sure what to do?
------ Edit ------
ah ha!
Seems it works now I've moved the main .rssfeed bulk into the html (out of the .ready) and rewriting the ticker code:
var tickerTryCount = 0;
function addTicker() {
if (tickerTryCount < 5) {
if ($('#js-news').size() > 0) {
$('#js-news').ticker({
controls: false,
titleText: ''
});
} else {
tickerTryCount++;
setTimeout(addTicker, 1000);
}
}
}
Call the ticker() on ajaxStop()
$("#ticker-wrapper")
.rssfeed("http://news.hse.gov.uk/feed/", {
limit: 5,
linktarget: '_blank',
titletag: 'p',
snippet: false,
header: false,
date: false,
content: false
})
.ajaxStop(function() {
$('#js-news').ticker({controls: false, titleText: '' });
});
ah ha!
Seems it works now I've moved the main .rssfeed bulk into the html (out of the .ready) and rewriting the ticker code:
var tickerTryCount = 0;
function addTicker() {
if (tickerTryCount < 5) {
if ($('#js-news').size() > 0) {
$('#js-news').ticker({
controls: false,
titleText: ''
});
} else {
tickerTryCount++;
setTimeout(addTicker, 1000);
}
}
}