I have a PagedList on one of my actions such as
public ActionResult search(int? page)
{
}
The PagedList works correctly but my question is how can I findout what page the user is in and then change the background color on that page? for instance the PagedList at the bottom of the page are shown like
1 2 3 4 5
If the user is on like page 3 I would like to change the background color of the link that shows that page number, here is how my view is..
#if (Model.HasPreviousPage)
{
if (Model.PageNumber > 1)
{
#Html.ActionLink(String.Format("{0}", (Model.PageNumber - 1).ToString()), "index", new { page = Model.PageNumber - 1 })
#Html.Raw(" ");
}
}
#if (Model.HasNextPage)
{
if (Model.PageNumber + 1 <= Model.PageCount)
{
#Html.ActionLink(String.Format("{0}", (Model.PageNumber + 1).ToString()), "index", new { page = Model.PageNumber + 1 })
#Html.Raw(" ")
}
}
The page number in the browser are shown as /search?page1 .../search?page2 etc. anyways any help or suggestions would be great !!
Change the styling of the link if the page link being rendered is the current page.
You don't show how you render the entire "pager bar", but we do something similar:
for (int i = 1; i <= Model.PageCount; i++)
{
if (i == Model.PageNumber)
{
//this is the current page, so change the style of the link
#Html.ActionLink(String.Format("{0}", i.ToString()), "index", new { page = i, style = "style_of_current_page_link" })
}
else
{
//this is not the current page, so
#Html.ActionLink(String.Format("{0}", i.ToString()), "index", new { page = i })
}
#Html.Raw(" ")
}
Related
At the end of wikipedia pages, there are reference links. I am trying to not display reference list, and list is toggled when clicked on heading of reference links, like 'Further Reading', 'Notes', 'References' etc. Every reference list has class name 'reflist'. Problem I am having is, when I try to find div with reflist class after heading,
if (div.className == 'reflist') statement does not work. What could be going wrong?
I wrote following code. Problem is when I click 'Further reading', 'reflist' of 'References' is toggled. Clicking 'References' also toggle the same 'relist'. By the way I am not Professional Programmer...
if (document.getElementsByClassName("reflist")) {
let x = document.getElementsByClassName("reflist");
for (let i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
function toggle(element) {
element.style.display = element.style.display == "none" ? "block" : "none";
}
// furtherReading is <span> element.
var furtherReading = document.getElementById("Further_reading");
// parentElement is <h2> element
furtherReading.parentElement.style.background = '#f8f9fa';
furtherReading.parentNode.style.borderBottom = 'none';
furtherReading.style.cursor = "pointer";
var references = document.getElementById("References");
references.parentElement.style.background = '#f8f9fa';
references.parentElement.style.borderBottom = 'none';
references.style.cursor = "pointer";
if (furtherReading) {
/* There may be other 'style' or 'div' elements before 'div' having className 'reflist' */
let a = furtherReading.parentElement.nextElementSibling;
while (a) {
if (a.className == 'reflist') {
break;
} else
a = a.nextElementSibling;
}
furtherReading.addEventListener("click", toggle.bind(null, a));
}
if (references) {
let b = references.parentElement.nextElementSibling;
while (b) {
if (b.className == 'reflist') {
break;
} else
b = b.nextElementSibling;
}
references.addEventListener("click", toggle.bind(null, b));
}
Try the following code, test with https://en.wikipedia.org/wiki/Perast
// ==UserScript==
// #name Toggle Wikipedia Reference
// #namespace http://tampermonkey.net/
// #version 0.1
// #description Toggle Wikipedia Reference
// #author Ynjxsjmh
// #match *://*.wikipedia.org/wiki/*
// #grant none
// ==/UserScript==
(function() {
'use strict';
var reflist = document.getElementsByClassName("reflist")[0];
var reference = document.getElementById("References");
console.log("Toggle Wikipedia Reference");
reflist.style.display = "none";
console.log(reference);
reference.addEventListener("click", toggleReference.bind(null, reflist));
function toggleReference(element) {
element.style.display = element.style.display == "none" ? "block" : "none";
}
})();
The problem is that you should get the div manually since nobody help you loop through the div.
When I click on a module inside of the module selection dialog, DNN refreshes the page (before the hovering, draggable element appears on the page). This only happens using our skin (https://github.com/2sic/dnn-theme-bootstrap3-instant).
DNN is looking for the element #dnn_ContentPane_SyncPanel (which seems to be an ajax wrapper) with Teleriks findComponent method. Because the element can't be found, DNN performs a page reload.
Our skins content pane:
<div id="ContentPane" runat="server" containertype="G" containername="Invisible Container" containersrc="default.ascx"></div>
The DNN code, that triggers the reload (last function call):
refreshPane: function (paneName, args, callback, callOnReload) {
var paneId;
if (!paneName) {
paneId = this.getModuleManager().getPane().attr('id');
} else {
paneId = this.getPaneById(paneName).attr('id');
}
var pane = $('#' + paneId);
var parentPane = pane.data('parentpane');
if (parentPane) {
this.refreshPane(parentPane, args, callback);
return;
}
//set module manager to current refresh pane.
this._moduleManager = pane.data('dnnModuleManager');
var ajaxPanel = $find(paneId + "_SyncPanel");
if (ajaxPanel) {
//remove action menus from DOM bbefore fresh pane.
var handler = this;
pane.find('div.DnnModule').each(function () {
var moduleId = handler._moduleManager._findModuleId($(this));
$('#moduleActions-' + moduleId).remove();
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(this._refreshCompleteHandler);
this._refreshPaneId = paneId;
this._refreshCallback = callback;
ajaxPanel.ajaxRequest(args);
} else {
//save the args into cookie, after page reload then catch the cookie
//and float the module for drag
if (args && !this._noFloat) {
this._setCookie('CEM_CallbackData', args);
}
if (callOnReload && typeof callback == "function") {
callback.call($('#' + paneId), [true]);
}
location.reload();
}
}
After some time, we found out what the issue was.
Our skin was using the <%=SkinPath%> syntax instead of <%#SkinPath%>, which caused DNN to force a reload. This probably has to do with the lifecycle of the document.
How do I create an a slider menu using Xamarin.Forms? Is it baked in or something custom?
You create a new class which contains all the definitions for both the Master - i.e. the menu - and the Detail - i.e. the main page. I know, it sounds back-to-front, but for example..
using System;
using Xamarin.Forms;
namespace testXamForms
{
public class HomePage : MasterDetailPage
{
public HomePage()
{
// Set up the Master, i.e. the Menu
Label header = new Label
{
Text = "MENU",
Font = Font.BoldSystemFontOfSize(20),
HorizontalOptions = LayoutOptions.Center
};
// create an array of the Page names
string[] myPageNames = {
“Main”,
“Page 2”,
“Page 3”,
};
// Create ListView for the Master page.
ListView listView = new ListView
{
ItemsSource = myPageNames,
};
// The Master page is actually the Menu page for us
this.Master = new ContentPage
{
Title = "The Title is required.",
Content = new StackLayout
{
Children =
{
header,
listView
},
}
};
// Define a selected handler for the ListView contained in the Master (ie Menu) Page.
listView.ItemSelected += (sender, args) =>
{
// Set the BindingContext of the detail page.
this.Detail.BindingContext = args.SelectedItem;
Console.WriteLine("The args.SelectedItem is
{0}",args.SelectedItem);
// This is where you would put your “go to one of the selected pages”
// Show the detail page.
this.IsPresented = false;
};
// Set up the Detail, i.e the Home or Main page.
Label myHomeHeader = new Label
{
Text = "Home Page",
HorizontalOptions = LayoutOptions.Center
};
string[] homePageItems = { “Alpha”, “Beta”, “Gamma” };
ListView myHomeView = new ListView {
ItemsSource = homePageItems,
};
var myHomePage = new ContentPage();
myHomePage.Content = new StackLayout
{
Children =
{
myHomeHeader,
myHomeView
} ,
};
this.Detail = myHomePage;
}
}
}
It is built in: MasterDetailPage. You'd set the Detail and Master properties of it to whatever kinds of Pages you'd like. I found Hansleman.Forms to be quite enlightening.
My minimum example (as posted here) is as follows:
public class App
{
static MasterDetailPage MDPage;
public static Page GetMainPage()
{
return MDPage = new MasterDetailPage {
Master = new ContentPage {
Title = "Master",
BackgroundColor = Color.Silver,
Icon = Device.OS == TargetPlatform.iOS ? "menu.png" : null,
Content = new StackLayout {
Padding = new Thickness(5, 50),
Children = { Link("A"), Link("B"), Link("C") }
},
},
Detail = new NavigationPage(new ContentPage {
Title = "A",
Content = new Label { Text = "A" }
}),
};
}
static Button Link(string name)
{
var button = new Button {
Text = name,
BackgroundColor = Color.FromRgb(0.9, 0.9, 0.9)
};
button.Clicked += delegate {
MDPage.Detail = new NavigationPage(new ContentPage {
Title = name,
Content = new Label { Text = name }
});
MDPage.IsPresented = false;
};
return button;
}
}
An example solution is hosted on GitHub.
On iOS the result looks like this (left: menu open, right: after clicking on "B"):
Note that you need to add the menu icon as a resource in your iOS project.
If you are looking for simple example of MasterDetailPage please have a look at my sample repo at GitHub. Very nice example is also presented here
Slideoverkit is a great plugin available for Xamarin Forms. There is a github to see free samples and you could find documentation about it here.
How can I create a rotator with "FormCode" mode while being able to start that rotator automatically when the page loads? In other words, to start the rotator automatically while enabling end user to stop/start/move next/move back.
I need a complete sample code for the call.
I've used the following JavaScript/JQuery code for FormCode management:
<script type ="text/javascript">
//
function
startRotator(clickedButton, rotator, direction)
{
if
(!rotator.autoIntervalID)
{
refreshButtonsState(clickedButton, rotator);
rotator.autoIntervalID = window.setInterval(
function
()
{
rotator.showNext(direction);
}, rotator.get_frameDuration());
}
}
function
stopRotator(clickedButton, rotator)
{
if
(rotator.autoIntervalID)
{
refreshButtonsState(clickedButton, rotator)
window.clearInterval(rotator.autoIntervalID);
rotator.autoIntervalID =
null
}
}
function
showNextItem(clickedButton, rotator, direction)
{
rotator.showNext(direction);
refreshButtonsState(clickedButton, rotator);
}
// Refreshes the Stop and Start buttons
function
refreshButtonsState(clickedButton, rotator)
{
var
jQueryObject = $telerik.$;
var className = jQueryObject(clickedButton).attr("class"
);
switch
(className)
{
case "start"
:
{
// Start button is clicked
jQueryObject(clickedButton).removeClass();
jQueryObject(clickedButton).addClass(
"startSelected"
);
// Find the stop button. stopButton is a jQuery object
var stopButton = findSiblingButtonByClassName(clickedButton, "stopSelected"
);
if
(stopButton)
{
// Changes the image of the stop button
stopButton.removeClass();
stopButton.addClass(
"stop"
);
}
}
break
;
case "stop"
:
{
// Stop button is clicked
jQueryObject(clickedButton).removeClass();
jQueryObject(clickedButton).addClass(
"stopSelected"
);
// Find the start button. startButton is a jQuery object
var startButton = findSiblingButtonByClassName(clickedButton, "startSelected"
);
if
(startButton)
{
// Changes the image of the start button
startButton.removeClass();
startButton.addClass(
"start"
);
}
}
break
;
}
}
// Finds a button by its className. Returns a jQuery object
function
findSiblingButtonByClassName(buttonInstance, className)
{
var
jQuery = $telerik.$;
var ulElement = jQuery(buttonInstance).parent().parent();
// get the UL element
var allLiElements = jQuery("li", ulElement);
// jQuery selector to find all LI elements
for (var
i = 0; i < allLiElements.length; i++)
{
var
currentLi = allLiElements[i];
var currentAnchor = jQuery("A:first", currentLi);
// Find the Anchor tag
if
(currentAnchor.hasClass(className))
{
return
currentAnchor;
}
}
}
//]]>
And the following code for the calls:
<
a href="#" onclick="stopRotator(this, $find('<%= MyRotator.ClientID %>
')); return false;"
class="stopSelected" title="Stop">Stop
'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
class="start" title="Start">Start
However, I cannot start the rotator on the page load. Tried to use this code in the in the MyRotator_DataBoud event, but did not work either:
protected void rrMyRotator_DataBound(object sender, EventArgs
e)
{
Page.RegisterClientScriptBlock(
"MyScript", " startRotator(this, $find('<%= MyRotator.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);"
);
}
There are a couple of examples available in the Telerik online demos for this functionality and they have code you can use. See http://demos.telerik.com/aspnet-ajax/rotator/examples/clientapicontrol/defaultcs.aspx and http://demos.telerik.com/aspnet-ajax/button/examples/slideshow/defaultcs.aspx
I am trying to link to a specific tab in Magento Enterprise. It seems that all of the answers I've found don't apply well to their method. I just need a link to the page to also pull up a specific tab. This is the code they use:
Enterprise.Tabs = Class.create();
Object.extend(Enterprise.Tabs.prototype, {
initialize: function (container) {
this.container = $(container);
this.container.addClassName('tab-list');
this.tabs = this.container.select('dt.tab');
this.activeTab = this.tabs.first();
this.tabs.first().addClassName('first');
this.tabs.last().addClassName('last');
this.onTabClick = this.handleTabClick.bindAsEventListener(this);
for (var i = 0, l = this.tabs.length; i < l; i ++) {
this.tabs[i].observe('click', this.onTabClick);
}
this.select();
},
handleTabClick: function (evt) {
this.activeTab = Event.findElement(evt, 'dt');
this.select();
},
select: function () {
for (var i = 0, l = this.tabs.length; i < l; i ++) {
if (this.tabs[i] == this.activeTab) {
this.tabs[i].addClassName('active');
this.tabs[i].style.zIndex = this.tabs.length + 2;
/*this.tabs[i].next('dd').show();*/
new Effect.Appear (this.tabs[i].next('dd'), { duration:0.5 });
this.tabs[i].parentNode.style.height=this.tabs[i].next('dd').getHeight() + 15 + 'px';
} else {
this.tabs[i].removeClassName('active');
this.tabs[i].style.zIndex = this.tabs.length + 1 - i;
this.tabs[i].next('dd').hide();
}
}
}
});
Anyone have an idea?
I would consider modifying how the class starts up.
initialize: function (container) {
this.container = $(container);
this.container.addClassName('tab-list');
this.tabs = this.container.select('dt.tab');
// change starts here //
var hashTab = $(window.location.hash.slice(1));
this.activeTab = ( this.tabs.include(hashTab) ? hashTab : this.tabs.first());
// change ends here //
this.tabs.first().addClassName('first');
this.tabs.last().addClassName('last');
this.onTabClick = this.handleTabClick.bindAsEventListener(this);
for (var i = 0, l = this.tabs.length; i < l; i ++) {
this.tabs[i].observe('click', this.onTabClick);
}
this.select();
}
Here, I have only changed how the initial tab is chosen. It checks for an URL fragment which is commonly known as a hash, if that identifies one of the tabs it is preselected. As a bonus the browser will also scroll to that element if possible.
Then you only need to append the tab's ID to the URL. For example you might generate the URL by;
$productUrl = Mage::getUrl('catalog/product/view', array(
'id' => $productId,
'_fragment' => 'tab_id',
));
If you've recently migrated from an earlier Magento release, e.g. from Enterprise 1.11 to Enterprise 1.12, make sure the javascript in /template/catalog/product/view.phtml
right after the foreach that generates the tabs gets updated to the 1.12 version:
<script type="text/javascript">
var collateralTabs = new Enterprise.Tabs('collateral-tabs');
Event.observe(window, 'load', function() {
collateralTabs.select();
});
</script>
surfimp's VERY helpful suggestions did not produce the desired opening of the closed tab otherwise. Once this updated javascript was added, clicking on a link to read Review or Add Your Review on the product page, jumped to the Reviews tab, even if the tab had been hidden.
Similar to Zifius' answer, you can modify the initialize function to just take another argument which will be the active tab.
Event.observe(window, 'load', function() {
new Enterprise.Tabs('collateral-tabs', $('tab_review'));
});
and then in the scripts.js (or wherever this class may exist for you)
initialize: function (container, el) {
...
this.activeTab = el;
...
}
Use whatever logic in the template you like to set 'el' to the desired value.
The reason I did it this way is because when I used Zifius' method, the desired tab would be the active tab, but the default tab's content was still displayed.
Had the same task yesterday and as I don't know about prototype much I solved it by adding another method:
selectTab: function (element) {
this.activeTab = element;
this.select();
},
Usage:
var Tabs = new Enterprise.Tabs('collateral-tabs');
Tabs.selectTab($('tabId'));
Would like to know if it's a correct approach