I'm trying to customize a survey I'm building on Qualtrics so that certain items in the Table of Contents are disabled. Basically I want you to be able to use the TOC to navigate to previous pages, but not to be able to click on subsequent pages. This is not something I can customize just using the Qualtrics menu.
I'm trying to add Javascript to each block to enable this feature, but can't get it to work. I looked into the html elements on my page and under a div labeled "ToC Sidebar", each element of my ToC is there with a unique id (e.g. "FL_34"), and there's an 'onclick' function under this element to go to link's page. I just want to set this to false. Apologies if this is obvious, I'm new to Qualtrics and Javascript.
Here's what I have right now, any thoughts?
Qualtrics.SurveyEngine.addOnload(function()
{
$("FL_34").onclick = false;
});
That's not the correct way to disable the onclick. What you would do is use: $("FL_34").removeAttribute("onclick");
However, you really don't want to it do that way at all because you don't want to worry about the specific id's, you don't want to display links that don't work, and you don't want to add a script to every page. Instead add this script that hides all the incomplete blocks to the header (Look&Feel/Advanced/Header(edit)/Source):
<script type="text/javascript">
Qualtrics.SurveyEngine.addOnload(function()
{
if($('Toc')) {
$('Toc').select('.Incomplete').invoke('hide');
}
});
</script>
For this to work, you have to set Page Transition to "none".
Related
I want to be able to know exactly which element from a class has been clicked. I enabled the text option in Tag Manager:
But it's still not visible in the click object. But it wouldn't pick it up, since the tag containing the text is nested in the clickable element. Can I add a custom HTML attribute to be able to identify which element has been clicked?
<div class="card-content"> //<---- clickable element
<i aria-hidden="true" class="card-icon material-icons">business</i>
<h3 class="card-title">Company details</h3> //<--- clicked text
</div>
The best way to figure it out is to use the "Preview & Debug":
Activate it
Go to the page where you want to test (you should see now a new box at the bottom)
Click on the element
Check the variables in the debug box. Especially check the click.element data.
My guess is that since there is no "real" text in the div box, just children tags, no text can be discovered.
There are different options to solve it:
add the text as data-attribute to the div and use the click.element data
use a data-layer push event
if you know JS you can use the click.element data in a JS variable and traverse down to the h3
If you are going to keep your code as it is, you could create a custom variable, using Custom JavaScript.
In order to do so you need to first create the custom variable, choosing the Custom JavaScript type:
This code should do the job (I tested id)
function() {
return {{Click Element}}.closest('.card-content').getElementsByClassName('card-title')[0].innerText;
}
The custom variable will return the text inside .card-title.
To test the custom variable, you may create a dumb HTML tag with a console.log script, replacing Inside TXT with the name you gave to your custom variable:
<script>console.log( {{Inside TXT}} )</script>
The trigger should be a Click All Elements.
When previewing this tag, the captured text should appear in your console, as well as in the debugger panel.
Reading again your question, I wonder if you are going to have several .card-title items inside the .card-content. In that case, this custom variable will not work. Let me know what is the case.
Also, the code could be simpler, but I am not really sure on how is it really going to work in your site, so this one seems more reliable, since it works clicking anywhere in the element.
EDIT:
In order to test it, after you click an element, a new "Click" will appear in the left pane (Summary). There, in the Variables tab, you will see the variables captured by the click. The data will be stored under the variable name you gave to the variable.
I've just started using the tag cloud feature for a new site i'm developing.
but now I've run into some problems
I can set the links in my tag cloud to go to a page, but I have many pages with a tab container.
so for instance, I have a tab container. one of its panels is a sports panel. the tab container has three other panels, say food, travel and drinks.
how do I make a tag that goes directly to that panel in the tab container?
really stuck here.
tried creating a normal a id="something" name="something", and tried creating the tags a href to that name with a #, but that didn't work.
could somebody please help me
would, of course, be greatly appreciated
A # is your best bet. So for example if you set up your link to appear as:
Link text
Then you can bind to the "hash change" event using javascript. jQuery example below.
// on load
jQuery(document).ready(function(){
// bind window hashchange event
jQuery(window).bind("hashchange", function(){
// get hash selected
var hash = window.location.hash;
// *** now do something with that information *** //
// *** eg, show hide panels where a nested element, attribute or data matches hash *** //
});
});
If you're doing it this way you should make all the "tab clicks" simply bound hash changes too, forgetting any previous functionality. Then it will be solid, and consistent.
You could also do the same using query strings. And if you're not a fan of the "hashchange" then do it another way. The key is that you would have a javascript function that looks for something in the url, then does something about it!
EDIT
Add to the "do something section" assuming all your tabs are of the same class and the hash is the same name as the ID
jQuery(".tabs").hide();
jQuery("#" + hash).show();
I have created a layout in Wordpress with a plug-in called builder. I then have a page that uses this layout. The layout contains a area with tabs.
When the user clicks on a link in my main menu he is taken to this page with the first tab open. Can I change the link to take him to the second tab instead?
Actually the menu looks like this
About us
-Overview
-History
-Contact
If the user clicks on about us or overview I want him to go to the first tab.
I guess you must create something with an HTML anchor OR
$(document).ready(function() {
$('#tabs #2nditemid').click();
});
OR
$(document).ready(function() {
$('#tabs li').hide();
$('#tabs li.2nditemid').show();
});
This may vary a bit but may lead you somewhere
this must be specific only to where you have the tabs... so best is to create a page theme only for this specific page to avoid extra jquery in all pages
I want to list some records from the table in a ASP.NET page. For each record, I want to display some data and at the same time, provide a button for them to click. I want to show a “CLICK TO VIEW BUTTON” If they click on the button, I want to have a box slide down (using jQuery) to display the other details for the record. An example of what I am looking for can be found here.
Sample of drop down
I would prefer to have one function to handle the details. I would like the box to appear right underneath each record and not at the bottom of the page. Is there a way to do this using jQuery? I was looking at the wrap, append but was not sure on how to go about implementing this.
Put the box in your ASP markup, but hide it:
Show details
<div id="details123" style="display: none"></div>
Now implement a function to show/load:
function showDetails(recordId) {
var detailsDiv = $("#details" + recordId);
// load stuff -- replace this with whatever is
// appropriate for your app
$.getJSON("/myapp/someJSONfunction?recordId=" + recordId,
null,
// this will be run if successful
function(data) {
if (data.value) {
detailsDiv.text(data.value).slideDown();
}
}
});
}
Using the viewer control for display of SQL Reporting Services reports on web page (Microsoft.ReportViewer.WebForms), can you move the View Report button? It defaults to the very right side of the report, which means you have to scroll all the way across before the button is visible. Not a problem for reports that fit the window width, but on very wide reports that is quickly an issue.
No, you cannot reposition the view report button in the ReportViewer control.
However, you could create your own custom report viewing control. The control would be comprised of fields for report parameters and a button to generate the report. When a user clicks the button you could generate the report in the background. You could display the report as a PDF, HTML, etc.
It's kind of a hack, but you can move it in JavaScript. Just see what HTML the ReportViewer generates, and write the appropriate JavaScript code to move the button. I used JavaScript to hide the button (because we wanted our own View Report button). Any JavaScript code that manipulates the generated ReportViewer's HTML must come after the ReportViewer control in the .aspx page. Here's my code for hiding the button, to give you an idea of what you'd do:
function getRepViewBtn() {
return document.getElementsByName("ReportViewer1$ctl00$ctl00")[0];
}
function hideViewReportButton() { // call this where needed
var btn = getRepViewBtn();
btn.style.display = 'none';
}
The reason the button is pushed over to the right is that the td for the parameters has width="100%". I'm solving this problem with the following jquery. It simply changes the width of the parameters td to 1. Browsers will expand the width on their own to the width of the contents of the element. Hope this helps.
<script type="text/javascript">
$(document).ready(function() {
$("#<%= ReportViewer1.ClientID %> td:first").attr("width", "1");
});
</script>
Since I was searching for this answer just yesterday, I thought I'd post what I came up with to solve our problem. Our reports were coming back wide, and we wanted the "view reports" button to exist on the left side of the control so there was no need to scroll to get to the button. I did need to go into the source of the rendered file to find the ID names of the button and the target table.
I wrote a simple cut and paste javascript function to pull the button from its original position and essentially drop it into the next row in the containing table below the date pickers.
function moveButton() {
document.getElementById('ParameterTable_ctl00_MainContent_MyReports_ctl04').appendChild(document.getElementById('ctl00_MainContent_MyReports_ctl04_ctl00'));
}
This function gets called on the report viewer load event.
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "moveButton", "moveButton();", True)
To adjust the position, I used the CSS ID.
#ctl00_MainContent_MyReports_ctl04_ctl00 {
margin: 0px 0px 0px 50px;
}
I had the same problem and ended up using an extension on Travis Collins answer; As well as changing the table column width I also align the "View Report" button left so that it appears neearer to rest of the controls.
<script type="text/javascript">
$(document).ready(function() {
$("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:first-child").attr("width", "1");
$("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:last-child").attr("align", "left");
});
</script>
You may need to tweak the JQuery selector depending on the element naming assigned to your existing control.