I'm using Charge Bee Payment Gateaway on my website (who don't know what it is, it's a payment gateaway created from their website, I just insert the link into my website and the "Plan" can be bought from my website). Now I'm using Supsystic Pricing Tables Plugin and at the bottom I have a button which should lead to payment, but the plugin doesnt allow me to add HTML element inside the button so I can actually add it, and I think my only option is to somehow append the classes to already existing classes with javascript or jQuery.
This is the button from plugin:
<a class="ptsEditArea ptsInputShell dt-sc-button charge-bee" style="color: #fff !important;">GET STARTED</a>
And this are the data-cb-types that I need to append to this button code so it can open ChargeBee transcation:
data-cb-type="checkout" data-cb-plan-id="Pet_sitter_three_monthly"
Now is there any way I can add this classes to the <a> link I shared above.
Note that on the plugin page I can add classes to the button but I can't add data-cb-type and data-cb-plan.
If anyone can help I would be much appricated. Best wishes!
You can use Element.setAttribute() to achieve this in JS.
var e = document.getElementsByClassName('charge-bee');
e.setAttribute('data-cb-type', 'checkout');
e.setAttribute('data-cb-plan-id', 'Pet_sitter_three_monthly');
Doing so would add data-cb-type="checkout" data-cb-plan-id="Pet_sitter_three_monthly" to .charge-bee.
CodePen Example
Related
I am using a Content Management System that places a title on the top of all our webpages. If you click on this title, it takes you to the main homepage. This part of the page is something I cannot change, but fortunately I can add CSS and/or Javascript to these webpages.
Is there a way to make it so that clicking on that title, it takes me to a different URL? I cannot edit the HTML that is used to display that title (Posted below)
I have honestly not been able to think up of a solution for this. I can only imagine that it's possible through Javascript, but I'm not sure.
<h1 class="page-title">
<span><a data-home-link="" href="/sites/ww/MyWebPage">My Web Page</a></span>
</h1>
I would like to be able to click on the "H1" element and have it take me to a different webpage, different from "MyWebPage".
If you cannot change the html to add an id you could use document.querySelector or document.querySelectorAll
For example, if it's the only 'a' element with that link address on the page you can use:
document.querySelector('a[href="/sites/ww/MyWebPage"]').setAttribute('href', '/elsewhere/page');
Or if it's the 1st of >1 you can use:
document.querySelectorAll('a[href="/sites/ww/MyWebPage"]')[0].setAttribute('href', '/elsewhere/page');
You can simply give your element a unique id and then edit its attributes with javascript. So you will have:
<a data-home-link="" href="/sites/ww/MyWebPage" id = "someId">
And then with javascript, you can change its attributes like so:
document.getElementById('someId').setAttribute('href',
'/sites/someOtherFolder/..');
Should you want to not display the enforced title at all, just use JavaScript or jQuery to hide class "page-title"
Eg with jQuery
$(document).ready(function () {
$(".page-title").hide();
});
I have a sapui5 QuickView, which looks something like this:
<QuickView id="quickView">
<QuickViewPage pageId="PageId123">
<QuickViewGroup>
<QuickViewGroupElement label="Material" value="{Material}" type="{sap.m.QuickViewGroupElementType.text}"></QuickViewGroupElement>
</QuickViewGroup>
</QuickViewPage>
</QuickView>
Now, I want to add a button in bottom of Quickview. Is it possible? I tried adding
<Button icon="sap-icon://action"> </<Button>
But this does not work somehow. Is there any way I can add button? Thanks in advance.
It's not possible.
According to Fiori Design Guidelines
The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.
(...)
Do not use the quick view if:
You want to provide information in a way other than displaying it in groups.
Basically this can be understood checking the Type of the following aggregations:
pages from class sap.m.QuickView
groups from class sap.m.QuickViewPage
elements from class sap.m.QuickViewGroup
Finally, class sap.m.QuickViewGroupElement is not a container that allows you to add controls (like a Button) inside it.
So, you should use a Popover like in this sample from the documentation
Use a View. Put a button first and then add a QuickView as fragment. There is an example in the UI5 Demo Kit.
https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.QuickViewCard/sample/sap.m.sample.QuickViewCard
I would like to hide a HTML Form before even the page loads using javascript.
I was able to use display='none' style property to hide the form using javascript but the form content loads visible for a second before disappearing.
var searchbar = document.getElementById("searchform");
searchbar.style.display = 'none';
I have read many solutions in stackoverflow adding some css code in the page and display the content later using removeClass.
Problem is I do not have access to code behind the web page to add the CSS content. However I can add some custom javascript code only in header or a footer.(cannot use jQuery as well).
Please let me know if its possible hiding the form element as expected.
I am quite new to javascripting. Please provide your valuable suggestions.
edit: Sorry, if you only can use some javascript and cannot access the html or css there is probably no solution for your problem.
You can store all you form in a javascript variable, and write it in your div when the page is ready
Simple example :
function showForm(){
var container = $('#formContainer');
var form = '<input type="text" name="myInput">'; // Or you can load it from an external file
container.html(form);
}
$(document).ready(function(){
showForm();
});
But the best way is adding a css rule to hide your form, and show it when the page is loaded.
Web browser first render HTML. It takes time, while browser download css or js file. Best apprach would be to use inline display='none', not in css file.
<form style="display:none;">
...
</form>
The page contains multiple sections. Each section is represented by a TD block (see code below), the actual page would show a ">" icon (hovering over it shows the a href: javascript:void(0)), and when manually clicked, it would expand the section by a POST call to the endpoint from the SPAN block.
<td id="abc-parent" data-column="parent" data-row="abc" class="mt-cell mt-center">
<a href="javascript:void(0)">
<span class="a-declarative" data-action="myitable-fetch-rows" data-myitable-fetch-rows="{"endpoint":"/hz/inventory/variation?parentRecord=abc","rowId":"abc"}">
<div class="mt-variation-icon mt-variation-expand"/>
</span>
</a></td>
I am looking to create a bookmarklet containing a line of JQuery. And when called, it would expand all collapsible sections of a page.
What I mean is something like this (note this does not achieve what I described above):
javascript:jQuery('.a-declarative').each(function(i,e){e.click()})
I think you are looking for the "Trigger" function:
.trigger( eventType [, extraParameters ] ) Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
https://api.jquery.com/trigger/
So your code above should be something like:
$('.a-declarative').trigger('click');
Use at your own risk as this is not a very stable way to trigger events.
Create a global class .active for all the expandable areas (make sure they all have it, even if you have to add it after another class="another active")
Assure .active is the expanded state. Then call it like below.
$('.item').toggleClass('active');
Simple jsfiddle demo of this.
If for some reason you can't alter the mark-up to make a global active class, you may have to call it with all the 'expanded selectors' (but should be no reason for this)
$('.item').toggleClass('active expanded open');
For help on the bookmarklet aspect; this is a cool link that should help you out; but all you should be doing is defining the above in a function and then trigger with a .click() event.
Update! I just sent another pointer via comment section below; but you know you can add a class .active via jQuery to all the toggles that share same class or ID. But you will still have to investigate how the toggles were built on this external website for you to incorporate the expanded state with your new .active state. There is no way for use to know this as you didn't post that code; but it's typically found in the .css pretty easily.
$('td').find('.mt-center').addClass('active');
I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..
What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>
You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.
Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.
As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.
For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage