I have a HTML menu with ul and li tags and I want it to be either dropdown or drilldown type. Is there any way to reinitialize the ul tag with another type using Javascript?
From foundation docs: http://foundation.zurb.com/sites/docs/dropdown-menu.html
You can initialize your menu in javascript
var element = $('#myMenu')
var elem = new Foundation.Drilldown(element, options);
var elem = new Foundation.DropdownMenu(element, options);
Here's a fiddle showing how you can switch a menu between dropdown and drilldown: https://jsfiddle.net/genestd/8akhm8bn/
Note when initiation DropdownMenu after Drilldown, you need to remove the invisible class like this in the fiddle:
$("#mymenu>li>ul.invisible").removeClass("invisible");
Related
I tried to hide the x on the upper right-hand corner of my modal dialog window using both css and JQuery but nothing owrks. I tries using dynamic action on page load:
$("button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close").hide();
and to use css:
button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close
{
visibility: hidden !important;
}
for my inline css but neither worked, the x still shows up
The div where this button is showed is rendered in the parent page, so to get it in the modal page, you need to add "parent" in the beginning of your javarscript.
try this:
var button = parent.$('.ui-dialog-titlebar-close'); //get the button
button.hide(); //hide the button
I want the same column display different title in different views with only one list.
So I append a jquery script in my view.aspx.
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script type="text/javascript" src="/_layouts/15/Library/js/jquery-1.9.1.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('[id^=diidSort][id$=company]').text('com');
});
</script>
It works,but when I click column ascending or descending then refresh page. the column
title restore to original text. How could I fix it?
Since it is a SharePoint 2013 environment, the following approach is suggested:
Create rendering template in order to render the custom column title
in a List View
Update List View web part in View page
Template file
SharePoint 2013 introduces client side rendering framework (CSR) for List View that allows to define the rendering logic of SharePoint list views using HTML/JavaScript.
The following example demonstrates how to render the custom title for Title column in List View:
(function () {
function preTaskFormRenderer(renderCtx) {
modifyHeaderData(renderCtx);
}
function modifyHeaderData(renderCtx)
{
var viewTitle = renderCtx.viewTitle;
var linkTitleField = renderCtx.ListSchema.Field[1];
linkTitleField.DisplayName = viewTitle + ':' + linkTitleField.DisplayName;
}
function registerRenderer()
{
var ctxForm = {};
ctxForm.Templates = {};
ctxForm.OnPreRender = preTaskFormRenderer;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
}
ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');
})();
How to apply changes
Upload the specified script (lets name it TaskForm.js) into
SharePoint Site Assets library
Open View page in edit mode and go to List View web part properties
Specify JS Link property located under Miscellaneous group:
~sitecollection/SiteAssets/TaskForm.js (see pic. 1)
Save changes and repeat steps 2-4 for every View page if needed
Fig 1. JS Link property
Result
I have a scenario where I have list of items and each item has a create button. When I click on create, I wanted a component to be appended to the list item. This component uses model data as parameter and also accesses store from within. To access the store in the component I am using targetObject.store
The component works well if I add it to the template manually like:
{{#each}}
<div> blah blah {{my-component data=this.something action="doSomething"}} <button {{action 'add' this}}>Add</button></div>
{{/each}}
I can probably show/hide the component using a flag, and toggle it when we click on Add button, but I rather do it dynamically if possible.
I did try this but didn't work for me because I couldn't access store :
actions: {
add: function(obj){
var view = Ember.View.create({
template: Ember.Handlebars.compile('{{my-component action="addQuestion"}}')
});
view.set('data', obj.get('something'));
Ember.run(function() {
//prolly can get parent view rather than document.body
view.appendTo(document.body);
});
}
}
Thanks.
I think this example answers your question:
http://emberjs.jsbin.com/axUNIJE/1/edit
I have the following;
<asp:Repeater runat="server" ID="Repeater">
<ItemTemplate>
<sc:image field="image from droplink" Item='<%# Container.DataItem %>' runat="server" />
</ItemTemplate>
"Image from droplink" is a droplink selected value (a Sitecore content item). Within this item, there is a field "Image" which is the actual media item i want the source of. So the above does not work, as this field just returns the GUID of the content item.
How do I get the image src from the Image field of the droplink selected item in the above repeater?
You'll need to populate the Item or Datasource property on the sc:Image tag with the actual item containing the Image field. Item would be an Item object, whereas Datasource can be an ID or path. I think the following should do it.
<sc:Image runat="server" Field="image field" Datasource="<%# ((Item)Container.DataItem)["droplink field"] %>" />
The following answer assumes that the droplink on the Context Item points to a Media Item. (Prior to questioner clarification). Might be useful for someone else.
You'll need to use an asp:Image and a OnItemDataBound handler in your code behind, and use e.Item.DataItem (where e is RepeaterItemEventArgs) to get the item being bound. Ensure e.ItemType is a ListItemType.Item. From there it will be something like...
var item = (Item)e.Item.DataItem;
var dropLink = new InternalLinkField(item.Fields["image from droplink"]);
var mediaItem = dropLink.TargetItem;
if (mediaItem != null)
{
var options = new MediaOptions { Height = 100, Width = 100 }; //change to your dimensions
var imageUrl = MediaManager.GetMediaUrl(new MediaItem(mediaItem), options);
var imageControl = e.Item.FindControl("myImageControlID"); //change to asp:Image ID
imageControl.ImageUrl = imageUrl;
imageControl.AlternateText = mediaItem.Alt;
}
If you are supporting Page Editor (I hope you are!), within a repeater you can use Edit Frames to allow editing of the image on each item. (Note that the linked example puts an edit frame around a whole ListView, whereas you'll want to place it within your Repeater and databind the Datasource property to the current item ID.)
I have a form where I have joomla2.5 Editor. I want to show the content of that joomla2.5 Editor in Iframe Joomla2.5 Modal Box.
I use joomla editor
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
This page is in view folder.
I use the code in js file like window.parent.document.getElementById('body').value or window.parent.jInsertEditorText(tag, this.body);And it is included in js file. when I try to alert, alert shows null.
How to fix this in js file. If any body knows about it, please, reply it.
I need your hand.
Thank you
I write the answer here, because the comments are not good to display
code
Joomla modal functionality is good to show a link from a component but does not allow us to open a given element on the page. Therefor you need to write your own code, first of all do not override Joomla's core or all the modifications you make will be overriden the next time you upgrade. So assuming that you take this into account:
1- First thing to do, add the javascript code for your custom modal window. You will need to pass the text container div id or classname to the following code:
<script type="text/javascript">
$(document).ready(function(){
// Main parameters:
// Modify texteditor-id with the id or classname on your text div. For a classname use '.' instead of '#'
var HTMLContent = $("#texteditor-id").html();
var width = 600;
var height = 250;
$('#button').click(function(){
// transparent background
// we create a new div, with two attributes
var bgdiv = $('<div>').attr({
className: 'bgtransparent',
id: 'bgtransparent'
});
// add the new div to the page
$('body').append(bgdiv);
// get the widht and height of the main window
var wscr = $(window).width();
var hscr = $(window).height();
// set the background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// modal window
// create other div for the modal window and two attributes
var moddiv = $('<div>').attr({
className: 'bgmodal',
id: 'bgmodal'
});
// add div to the page
$('body').append(moddiv);
// add HTML content to the modal window
$('#bgmodal').append(HTMLContent);
// resize for center adjustment
$(window).resize();
});
$(window).resize(function(){
// explorer window dimensions
var wscr = $(window).width();
var hscr = $(window).height();
// setting background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// setting modal window size
$('#bgmodal').css("width", ancho+'px');
$('#bgmodal').css("height", alto+'px');
// getting modal window size
var wcnt = $('#bgmodal').width();
var hcnt = $('#bgmodal').height();
// get central position
var mleft = ( wscr - wcnt ) / 2;
var mtop = ( hscr - hcnt ) / 2;
// setting modal window centered
$('#bgmodal').css("left", mleft+'px');
$('#bgmodal').css("top", mtop+'px');
});
});
function closeModal(){
// remove created divs
$('#bgmodal').remove();
$('#bgtransparent').remove();
}
</script>
2- Your preview link must look something like this, the most important part is the id="button" part because it will be used to be identified by the previous jquery code:
<input type="button" id="button" value="Preview" />
3- Add the following code to your css
.bgtransparent{
position:fixed;
left:0;
top:0;
background-color:#000;
opacity:0.6;
filter:alpha(opacity=60);
}
.bgmodal{
position:fixed;
font-family:arial;
font-size:1em;
border:0.05em solid black;
overflow:auto;
background-color:#fff;
}
And that is basically what you need to do. Hope that helps!
Joomla has an inbuilt way to show modal boxes:
First you need to do is ask Joomla to load the modal library:
<?php JHTML::_('behavior.modal'); ?>
And this is the code that opens the modal window:
<a rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="url_to_modal_editor" target="_blank"> Open Modal Editor</a>
This will go in the linked href page (the page of the modal editor), lets say editor.p:
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
Please include class="modal" in anchor tag.