Is it possible to scroll to the top of the page when changing the argument of the spotify url?
I use this javascript function
$(document).ready(function() {
sp = getSpotifyApi(1);
var models = sp.require('sp://import/scripts/api/models');
tabs();
models.application.observe(models.EVENT.ARGUMENTSCHANGED, tabs);
function tabs() {
var args = models.application.arguments;
console.log(args[0]);
$('.section').hide();
$('#'+args[0]).show();
}
});
Every time I switch to another section I want to scroll to the top of the section. Is this possible? Similar to anchors like #top.
Thanks
Yes, use:
document.location = '#' + args[0];
And have different sections with same ids as the tabs.
Related
I need to give an icon to each section in my entities. For example, I need to give an icon to General information, another one for interactions section.
Is there an idea about how could I do that? and how can I make a background color for each section please?
Thanks in advance,
There is no way to assign icons to sections. The best you could do would be to add a web resource to each of your sections and have them link to an image, but it doesn't really sound like that's what you're going for.
There are no supported ways to modify the form background color. If you don't care about remaining supported, though, you can use jQuery to do it. Put this function into your form script:
function changeSectionBackgroundColor(sectionId, color) {
parent.$("table.ms-crm-FormSection[name='"+sectionId+"']").css({"background-color": color});
}
and use it like this:
changeSectionBackgroundColor("General_Section_2", "red");
changeSectionBackgroundColor("General_Section_2", "#ababab");
You could try to do something like this to insert the Section images:
var stackoverflow = (function (Xrm)
{
var sectionBarClassName = '.ms-crm-Form-SectionBar'; // name of the CSS class given to the Section's Label's <td> element
function GetSection(tabName, sectionName)
{
var parentTab = Xrm.Page.ui.tabs.getByName(tabName); // get the tab
var section = parentTab.sections.getByName(sectionName); // get the section
return section;
}
function AddSectionImage(tabName, sectionName, imageUrl)
{
var section = GetSection(tabName, sectionName); // retrieve section using Xrm
var elSection = document.querySelector('table[name=' + section.getKey() + ']');
var elSectionHeader = elSection.querySelector('tr:first-child');
var elTitles = elSection.querySelectorAll(sectionBarClassName);
if (elTitles.length === 1) // we can assume that this section has a title
{
var elImg = document.createElement('img');
elImg.src = imageUrl;
elTitles[0].insertBefore(elImg, elTitles[0].firstChild);
}
}
return {
AddSectionImage : AddSectionImage
};
})(Xrm);
You then call this code and pass in the Name (not label) of the tab and section as well as the relative URL of the image you want displayed. Like so:
stackoverflow.AddSectionImage('tab_5', 'tab_5_section_1', '/imgs/Cancel_16.png');
I've only tested this code in CRM 2016 (online). And the image is a bit rough. You'll need to take care of the styling (inline) and the size yourself.
This is of course, unsupported by Microsoft :)
Background
I got a page where I’m showing two list views from two separate lists which both have Custom List as their ListTemplate. They got their separate jslink file cause I don’t want them to look alike.
Problem
The js link file targets both listviews since they use the same Template.
Code
(function () {
var listContext = {};
listContext.Templates = {};
listContext.ListTemplateType = 100;
listContext.Templates.Header = "<div><ul>";
listContext.Templates.Footer = "</ul></div>";
listContext.Templates.Item = LinkTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(listContext);
})();
Question
Is there any way to make the js only target a specific list?
Ended up going with Paul Hunts solution that he writes about on myfatblog.co.uk. http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-issues-with-jslink-and-display-templates-a-solution/
The script ended up looking like this and I pasted it into the jslink function where I define what listContext to override.
// Override the RenderListView once the ClientTemplates.JS has been called
ExecuteOrDelayUntilScriptLoaded(function(){
// Copy and override the existing RenderListView
var oldRenderListView = RenderListView;
RenderListView = function(ctx,webPartID)
{
// Check the title and set the BaseViewId
if (ctx.ListTitle == "List")
ctx.BaseViewID = "list";
//now call the original RenderListView
oldRenderListView(ctx,webPartID);
}
},"ClientTemplates.js");
I'm experimenting with Snap in order to use svg and need to be able to use the Maki icons defined in https://github.com/mapbox/maki.
My plan is to load the svg's I need, and then instantiate them for particular icons on a piece of Snap paper. But in order for this to work, I need to place the icon at a particular place on the paper, but I can't get translation to work. Neither one of the translation techniques below works; the code works as is, but always places the icon at the top left.
What am I missing? There's not enough documentation on Snap, and I don't know if the problem is with the way the Maki icon svg is defined, or my use of Snap.
var icon = Snap.load("maki/bicycle-24.svg", function(f) {
var g = f.select("g").clone();
// var g = f.select("#layer1").clone(); // also works
// g.transform("t120,120");
// var t = new Snap.Matrix();
// t.translate(120,120);
// g.transform(t);
paper.append(g);
});
The cloning needs to happen after the append, as when loading an svg in Snap its just a fragment.
So you will need to do something like...
paper.append(f);
var element = paper.select('#someId').clone();
element.transform( myTransform );
Thank you! That did the trick! And since Snap is so poorly documented, I'm going to insert the code here that allows a general solution.
// Base set from which markers are constructed
var iconSet = paper.group();
iconSet.attr({ class: 'hide' });
// Instantiations of icons
var markers = paper.g();
// Now, create SVG shape
var icon = Snap.load("maki/bicycle-24.svg", function(icon) {
// Add it to the icon set
iconSet.append(icon);
// Instantiate it and remove from main view
var element = paper.select('#svg4460'); // Copies it!
// var element = paper.select('#base'); // Selects something but doesn't work
// var element = paper.select('#layer1'); // Selects something but doesn't work
// var element = paper.select('#bicycle-24'); // Silent fail
element = element.clone();
element.remove();
// Clone this icon and move it
var t = new Snap.Matrix();
t.translate(10,120);
element.transform(t);
// Insert into main document view (markers)
markers.add(element);
});
On my spotify app, if I click on player to play track, the track is highlighted in the list-view. But when I click on the next button of spotify the next track in the list-view is not highlighted, even when it is being played...the highlighting is totally lost. And I do not know how to do it. It works if I just reload the app or I go on next tab. Can anyone guide me as how to fix this? Thanks in advance :-)
models.Track.fromURI(track, function(track) {
models.Album.fromURI(track.album.uri, function(album) {
var pl = new views.Player();
pl.context = album;
document.getElementById('imag').appendChild ( pl.node );
var tracklist = new views.List(album);
tracklist.node.classList.add("sp-list");
$("#song1").append(tracklist.node);
Your code should work without any problems, since you are using the same context for both
Player and List views. In fact, I have tested it and it works for me (note that I have added a couple of missing lines):
var sp = getSpotifyApi(),
models = sp.require("$api/models"),
views = sp.require("$api/views"),
track = "spotify:track:6G0RXhQJGDnjgUdbQfBZRk";
models.Track.fromURI(track, function(track) {
models.Album.fromURI(track.album.uri, function(album) {
var pl = new views.Player();
pl.context = album;
document.getElementById("imag").appendChild(pl.node);
var tracklist = new views.List(album);
tracklist.node.classList.add("sp-list");
document.getElementById("song1").appendChild(tracklist.node);
});
});
In YUI 3 I have a node that is my select box:
Y.get('#regionSelect');
How do I get the <option> values that are currently selected (even if there are more than one?) Also, is there a tutorial out there that tells me explicitly how to do this (I don't want to serialize a whole form)?
Once you have the selector, you can chain get and each
Y.get("#regionSelect").get("options").each( function() {
// this = option from the select
var selected = this.get('selected');
var value = this.get('value');
var text = this.get('text');
// apply secret sauce here
});
I've just been using the demos/examples on http://developer.yahoo.com/yui/3/ to figure things out.
// Selected Value
Y.one('#regionSelect')._node.value;
Y.one('#regionSelect').get('value');
// Selected Index
Y.one('#regionSelect')._node.selectedIndex;
Y.one('#regionSelect').get('selectedIndex');
You might not need to iterate through all options if you need just a selected one:
var index = Y.get("#regionSelect").get('selectedIndex');
var value = Y.get("#regionSelect").get("options").item(index).getAttribute('value');
You can directly use this. Require selector-css3 module to support IE.
YUI().use("selector-css3", "node", function (Y) {
var text = Y.one("#ownerSelector option:checked").get("text");
});
http://jsfiddle.net/neosoyn/r8crW/