I am looking to control the visibility of a div on one page from a toggle button on an admin page. I have seen many examples of this being done on the same page but none that explain what it would look like to have this done from another page.
There are a number of ways to handle this. You should research what you want to do and then decide on a method that works best for you.
Personally I would look at a server-side implementation. In this way you can control the output to the client. You can use session variables for example. How this is done will depend on what language you are using.
If you only want a javascript solution then I can think of two options. First is to use cookies. You can then read the cookie and show/hide the div based on the value. This is what I would do.
Second you can pass in a querystring parameter and read it on the other page. Then hide/show your div. http://mysite.com/?div=hidden
If the admin page opened the child page using JavaScript then you can assign the window to a variable and control the contents through that variable. Like so:
var childWindow = window.open('some URL', options);
// now toggle the div in the child
var childDiv= childWindow.document.getElementById('your_div_id');
$(childDiv).toggle();
Related
I've worked thru the various jquery UI demos of drag and drop and sortable. These show how to get items from one list to another. One example even shows a shopping cart demo.
Am I missing something in that a item won't be part of a post to the server right? so what use is this other than reorganizing a display on a page?
Is it possible to adapt this to some sort of input field?
TIA
J
item won't be part of a post to the server right? so what use is this
other than reorganizing a display on a page?
Allowing users to reorganize the elements in the page is a nice feature, even if you aren't notified on the server. For example, by allowing users to drag and drop elements, you may store his current page layout in localStorage so that the next time the user visits your page, the layout is restored automatically. You don't need to be notified on the server side what the user preferences are.
All of these jQuery plugins (sortable, draggable, etc.) have functions that you can hook into and trigger some server side processing as well. For example, when a user drags and drops an element from one section of the screen to another, you can perfectly make an ajax request and do some processing on your end. This would provide a very nice user experience to the user.
For example:
$( ".selector" ).droppable({
drop: function( event, ui ) {
$.post('http://server/somection',data{...});//do something on the server-side
};
});
Absolutely! jsfiddle with demo here.
I'm having a little trouble controlling the visual display of my filtering tabs and pagination links using Isotope. I want to fix two issues:
1 How do I class one of my filtering tabs so it looks already selected on page load?
2 When I click on a pagination link in the container, the currently selected tab is declassed, meaning it no longer looks selected?
Please see the demo here andym.ca/designs/isotope/tester4.html and you will understand what I mean.
Regarding the first question; before the code of your Isotope logic proper, you could have this anonymous self-executing function to preset certain things
(function(){
var selector = $('.classtobefilteredoutonload');
$container.isotope({ filter: selector });
// other things that shall happen too go here, like assigning the right class to you PMTV tab div
return false;
})();
Or failing that, leverage hash history to preset your site.
Regarding the second question, it looks like you're using this CngClass function to toggle the focus for all your clickable "a" elements, so naturally Archive Videos will lose focus when you click on a pagination "a" element. You can see it well in Google Chrome's developer tools while clicking on your tabs and paginators.
Well, you should toggle a "highlighting class" on your pagination separately, with a different function from the one that toggles your tabs. An anonymous self-executing function executes as soon as it is encountered, so it looks like the rest of your DOM is not ready. Try the same function but with on document ready.
You can do it like this.
You can pre-mark your tab or whatever item on screen like this
i want to display the pop ups in asp.net page like how the stack over flow show the pop ups on the top of the site (you get the new answer for the question like that in a orange color) how can i write the code is there any free source code or any reference. thank you
Given below are the steps to achieve what you want.
Have a div (a container) to show your updates
Create a window.setTimeout to execute a JS function (AJAX)
In that function check for updates from server
Finally if there are any updates then show it in the div container
When there are updates then again setTimeout to make it invisible over a period of time (say 3 secs)
To achieve this in a very easy fashion use JS libraries like JQuery.
HTH
Thats not a 'popup', its probably just a standard DIV that has its height and content changed dynamically. You can do a "view source" on the page to locate the item, or use firebug (easier).
After looking, its a div called 'notify-container'.
These days, all that wizzery is generally done with jQuery
The asp.net ajax control toolkit has that. Check it out here.
I think you'll find that's done using a holding container at the top of the page, a timer to periodically query an AJAX enabled method for updates which replaces the content of the container based on the response.
I'm using Views dropdown filter (with tags) and it works great. However I would like to customize it in this way:
1 - remove button "Apply" and automatically update Views (at the moment I'm updating it with Ajax)
2- allow my customer to change the order of the dropdown items (specifying top items)
3- select multiple items without having to press the SHIFT button on keyboard (do not unselect other items if new items are selected)
http://dl.dropbox.com/u/72686/viewsFilter1.png
Let's suppose the items in the image are tags... something like this:
http://dl.dropbox.com/u/72686/viewsFilter2.png
thanks
Use jQuery to .hide() the Apply button, and then set a handler on the filter fields so that whenever one of them is changed (i.e., by the user), the Apply button registers a click.
Hmm, can't help with this one. You might be stuck writing a custom module that hooks into the Views API.
Sounds like the Sexy Exposed module would solve this problem?
I'm using the following code to keep the items selected and it works.
$('#edit-tid option').click(function() {
$(this).toggleClass("selected");
$("option:not(.selected)").removeAttr("selected");
$("option.selected").attr("selected", "selected");
//submit request
$('#edit-submit-Portfolio').click();
});
When a request is submitted the page is refreshed. The selected items are still selected (class="selected") but the javascript code do not keep them selected.. I don't understand why, since they have the correct class attribute.
So.. it doesn't work after refresh, even if the html code is the same (the same class="selected" attribute is assigned to the same items).
thanks
I've solved point 1 and 2, installing better exposed filter module from drupal website.
I have an ajax controltoolkit reorderlist within an asp.net application.
I need to disable certain specific steps from being reordered. This has to be done dynamically. All steps are consecutive and start from the beginning, but it's not known until runtime how many need to be disabled from being reordered any further.
I tried the e.item.enabled = false for reorderlist_itemdatabound but this just disabled links. I need to disable the drag handler.
Any help is greatly appreciated. Thanks!
To be honest, I'm not too familiar with this control, but...
You need to hide the drag handler div (or whatever is in the 'DragHandleTemplate' I believe) and/or change its class. Two suggestions:
1) Add a javascript startup script to disable the divs in question.
2) Subclass this control... Override the Render() method. Replace it with original code from ReorderList, but check the Item to see if you should render the drag handle.
as a workaround to disable drag'n'drop for some item - you can set width=0 to the control inside <DragHandleTemplate> </DragHandleTemplate>. Thus user won't be able to pick the item for dragging.
Suppose you have an image with id dragme in DragHandleTemplate; you can do this in the ItemDataBound handler:
Image dragMe = (Image)((TableRow)e.Item.Controls[0].Controls[0]).Cells[0].Controls[0].FindControl("dragMe");
dragMe.Style.Add(HtmlTextWriterStyle.Visibility, "hidden");
This way you preserve the alignment.