I have a page that contains multiple topics in accordion.
How can I post a link (on social media or other places) so when the user clicks it can view the topic I want without making him choose the desired one to view it?
The website is built in Joomla 2.5 using its native (mootools) accordions.
A temporary solution came to my mind is to make single pages containing only the content I want, but it won't help them view the other topics contained in the same page, unless the user clicks the same category.
MooAccordion has a display option. You could use like:
window.addEvent('domready', function () {
var index = window.location.search; // get query string
index = index.replace("?", ''); // remove the ?
index = index.length ? index : 0; // in case there in no query, display first
var myAccordion = new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .content', {
display: index // the actual behavior you are looking for
});
});
Read more at Mootools docs
So you could try these links as demo:
http://jsfiddle.net/brM2v/show/?0
http://jsfiddle.net/brM2v/show/?1
http://jsfiddle.net/brM2v/show/?2
Related
Need to find way to add hyperlinks to components of an assembly in the a360 viewer such that, when clicked or touched with mobile device, will navigate to a web page for more information. Realize it requires Forge API but can't find any specific examples of such a solution. I think this can be done from a properties table but I want direct navigation from touching/clicking the object.
You could just subscribe to the object selection event and react to it by e.g. opening a given URL:
viewer.addEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT,
function (event) {
// Get id of first selected item
var dbId = event.dbIdArray[0];
if (dbId) {
// Maybe get the properties of the selected object
viewer.getProperties(dbId, function (props) {
// Depending on the properties you could open a website
// Just printing to the console the external id of
// the selected component as an example
console.log(props.externalId);
});
}
}
);
If you search for "Autodesk.Viewing.SELECTION_CHANGED_EVENT" you can find some articles and samples also using this event, e.g. https://forge.autodesk.com/blog/selection-override
I have a table which displays results like the image posted below. Now I need to do some actions on each row by selecting it. There are two options I can think of,
1) We can provide a radio button for each row & a drop down on the right side to perform an action. But here i need to generate this code dynamically from a javascript file like below
function getMessage(result){
for (var j = 0; j < result.invocationResult.resultSet.length; j++) {
var tmp = "<tr>";
var resSet = result.invocationResult.resultSet[j];
for(res in resSet){
tmp += "<td>" + resSet[res] + "</td>";
}
$("#mytable > tbody").append(tmp+"</tr>");
$('#AppBody').hide();
$('#AuthBody').hide();
$('#ResTable').show();
}
}
2) Provide a link to a particular item in the row like Dispute Number & when clicked it should take me to another page where I can perform those action with a drop down. But here the links should be applied dynamically to the items in the rows. As per my knowledge we should not navigate using href as i am using worklight.
Please help me with approach and also examples.
Thanks.
So I'm not sure what is the issue you are facing with option 1...
As for option 2,
There is no problem navigating to another "page" using Worklight and jQuery Mobile, as long as you're doing it responsibly (definitely not use href). That is, not lose the Worklight context, at which point stuff will stop working.
The idea is this:
In the app's index.html you (will/should) have a <div data-role="page"> and in the case of Worklight, you will need to switch its contents with another from some other HTML file.
Here's a simplified Worklight 6.2 sample project: https://github.com/IdanAdar/Multipage-Navigation-Using-jQM
In the HTML:
load page1
In the JavaScript:
function changeToSomePage() {
$(':mobile-pagecontainer').pagecontainer('change','somepage.html');
}
Testing on the desktop with JQM doesn't produce this issue, so it's difficult to pinpoint.
Backstory: I have created server side code (php) to accept a query string and open a gallery straight to a picture. But if a user wants to share a link while surfing a gallery on a mobile device, and in particular a certain photo; most Mobile Browsers share the core link and not the actual photo. It's easy in the events when swiping to create a URL hashtag modifier for the URL with the photo id ( For example #photoID=987), but only if the gallery is originally started with no hashtags. It's then easy to share with a Phone's Native methods.
(function(window, $, PhotoSwipe){
$(document).ready(function(){
//More Code is here but not needed fro this question
$(photoSwipeInstance).bind(PhotoSwipe.EventTypes.onDisplayImage, function(e){
var pid = codeThatGetsPhotoIDFromDisplayedIMGURL();
window.location.hash = '&pid='+pid[0];
});
if(getUrlVars()["pid"]!=null || getUrlVars()["pid"]!=undefined)
{
console.log(getUrlVars()["pid"]);
var photopid= getPhoto(getUrlVars()["pid"]);
photoSwipeInstance.show(photopid);
}
});//End Documentstrong text
}(window, window.jQuery, window.Code.PhotoSwipe));
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
Issue: If a gallery is loaded with a hashtag the gallery will pop up the proper image but then immediately closes the slide show. And every photo past this point performs in the same manner, slideshow opens then closes.
I have turned off all AJAX, and hashtag anchor functions JQM utilizes. This hashtag url functions works as intended when using a Desktop browser but not when using any Mobile browser.
Has someone else tried this functionality?
I probably made this much more confusing then it is in my description.
Answer: JQM's hashtag handlers did not need to be turned off instead. Photoswipe needed this handler added to the options: backButtonHideEnabled: false
JQM's hashtag handlers did not need to be turned off instead. Photoswipe needed this handler added to the options: backButtonHideEnabled: false
I want to create a simple bookmarklet, that grabs the URL of the current webpage "location.ref" and saves it in a Google Spreadsheet. After it saves it, I want to stay on the current webpage.
The only way I know of writing to Google Spreadsheet is using Google App Script. So I wrote a simple script that does just that:
function doGet(request) {
var ss = SpreadsheetApp.openByUrl( "https://docs.google.com/spreadsheet/ccc?key=<MY-SPREADSHEET-ID>");
var sheet = ss.getSheets()[0];
var headers = ["Timestamp", "url"];
var nextRow = sheet.getLastRow();
var cell = sheet.getRange('a1');
var col = 0;
for (i in headers){
if (headers[i] == "Timestamp"){
val = new Date();
} else {
val = request.parameter[headers[i]];
}
cell.offset(nextRow, col).setValue(val);
col++;
}
return ContentService.createTextOutput(request.parameter.url)
.setMimeType(ContentService.MimeType.TEXT);
}
I published this as a webapp. I wrote the bookmarklet:
<a href="javascript:(
function(){
alert(window.open('https://script.google.com/macros/s/<MYWEBAPP>/exec?url='+encodeURIComponent(location.href), '_self'));
}
)();">
BOOKMARK
</a>
So far so good. It actually works when I click on the bookmarklet, it does grab the URL of the current webpage and save it in my spreadsheet. But then, the webapp returns a text response and the bookmarklet displays the text causing me to move away from my current website.
Is there a way to ignore the response? GAS webapp script requires me to use doGet() that has to return something. Is there a way to not return anything from GAS script? Alternatively, is there a way i could use some other call to replace window.open to invoke the webapp that would allow me to store the response in a variable and ignore it?
I know it's been over a year but I was trying to do exactly this. It took me a while to figure out, but this works. The 1 second delay was necessary to let the script finish loading.
javascript:(function(){
my_window=window.open('https://script.google.com/macros/s/<MYWEBAPP>/exec?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));
(window.setTimeout(function(){my_window.close();},1000));
void(0);
})();
Instead of using window.open you may consider sending a HTTP GET request using XMLHttpRequest.
Refer here on its usage.
Change _self to something else, e.g. bookmarker and it will open in a new window or tab. If you use it on many pages, they will all reuse the same tab if it keeps the same name.
I have a webpage with multiple jqgrids each with inline editing enabled, "action" column (edit icons) enabled and pager disabled. I need to handle the delete event for each row so that I can process the delete without reloading server-side data. I've looked at the approach mentioned in jqGrid Delete a Row and it's very helpful except I have two questions that are stumping me -
Are there more details around the rp_ge parameter in the delOptions.onClickSubmit event?
My column has the delOptions set as this -
delOptions: {onclickSubmit: function(rp_ge, rowid) {return onRowDelete(rp_ge,rowid);}},processing:true }},
Is there a way to get the grid id from within that event? I'd like to have a generic function that I can use to handle delete events from all the grids on the page. The rp_ge parameter has a gbox which sometimes contains the grid id appended? But I have no idea what it is since i'm not able to figure out when it's populated, when it's not.
function onRowDelete(rp_ge, rowid) {
//hardcoded grid id.. don't like it.
var gridid = '#Grid_X';
//what is this gbox?? can i get grid id predictable from it?
//var gridid = rp_ge.gbox.replace("#gbox_", "");
var grid = $('#Grid_X');
rp_ge.processing = true;
var result = grid.delRowData(rowid);
if (result) {
$("#delmod" + grid[0].id).hide();
}
return true;
}
In the jqGrid Delete a Row approach, the code $("#delmod"+grid[0].id).hide(); is hiding the popup delete confirmation dialog manually. What I noticed is that when the dialog pops-up, jqgrid de-emphasizes the background page (makes it light greyish). But after the popup is manually closed (hidden actually?), the background remains de-emphasized. So it looks like the page doesn't have focus (or even disabled). Any way this can be fixed? This can also be seen on the demo that Oleg wrote.
Any help would be appreciated.
(PS - I would've commented on the same post but I don't have enough points to comment on someone else's answer yet.)
In answer to your second point.
Several examples by Oleg such as this one have the following modification.
$("#delmod" + grid[0].id).hide();
is replaced with
$.jgrid.hideModal(
"#delmod"+grid_id,
{gb:"#gbox_"+grid_id,jqm:rp_ge.jqModal,onClose:rp_ge.onClose}
);
This will return focus after the delete operation.