I am working on an HTML web part. I wanted to make other web parts on the page to be collapsable and expandable. I found this script to place in an HTML form web part. It does exactly what I want. The only thing is all the other parts automatically are expanded when the page is loaded. I read through the script but, I am not familiar with jQuery syntax. The line in the code that I believe I need to change to make the sections automatically collapsed is:
$(this).closest('.s4-wpTopTable').find('tr:first').next().toggle().is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );
I believe I just need to change where it has toggle as visible to is not visible. I am not sure how to write that.
Here's the whole script:
<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('.s4-wpTopTable').find('tr:first h3').append('<a class=\'min\'
style=\'float:right\'><img src=\'/_layouts/images/collapse.gif\'/></a>');
var Collapse = "/_layouts/images/collapse.gif";
var Expand = "/_layouts/images/expand.gif";
$('.min').click(function(){
var img = $(this).children();
$(this).closest('.s4-wpTopTable').find('tr:first').next().toggle().is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand ); }); }); </script>
Here is trick may be it will work for you.Click on Edit Web part,Under Appearance find the chrome state, you need to set Chrome state to 'minimized',By default Chrome state will be 'Normal.
Then place your code either in CEWP or in your .aspx page using Sharepoint Designer.
Related
I'm new to Javascript. I have a script that clicks on the ad unit on the site. But now I need to achieve the same in Javascript.I already have same script for Python+selenium, but now need on JS.
The object specified in the index.html javascript code
When the page loads the code is transformed into an ad unit, consisting of 3 images with links.
But it is necessary to click to start to get a reference At least one of the three blocks.
In Google Chrome, the function "View code" gives the following:
How to find and click on one of the three elements on the page with JS?
Find by xpath or ID or tagname?
Help me please! Thanks in advance!
Maybe this way helps m?...
<script type="text/javascript">
window.onload = function () {
var links = document.find_element_by_xpath("//a[contains(#href,'.xyz')]");
window.location = links;
}
</script>
If you want to trigger a click on a element using Javascript, you can try the following:
document.getElementById('element').onclick();
Here's the working fiddle:
https://jsfiddle.net/tbjbbt5a/
I have a site that was built a few years ago, it was constructed using nested tables which is turning out to be a major issue when trying to convert the template into a responsive design.
It is an html site with a lot of SEO so the client is not willing to convert to php and risk loosing the links.
So, I decided to use the jquery load method to load the menu into a div, so if I need to add a page or change the current menu, I only have to change 1 page.
So the menu uses an older javascript code to hide the dropdowns:
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
I didn't really think it would cause an issue as the css is working fine and I don't see any errors, here is how I include that html page.
<script>
$(function(){
$("#menud").load("menu.html");
});
</script>
<script type="text/javascript" src="script.js"></script>
however the dropdowns are not displaying on hover, I looked at the page in the inspector and see a lot of properties on the ul on the original page, but when inspecting the ul on the new page, it has no properties, and nothing happens when I hover over a link.
here is the link to the test page: http://pezzelectric.com/about-mobile.html
Instead of me posting 2 links, you can just remove the "/about-mobile.html" and go to the home page or any other page to see how the menu is supposed to be.
If I've understood correctly, I think you may be missing an initialisation script in your new page (/about-mobile.html).
The home page has the following near the bottom of the page:
<script type=text/javascript>
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
and your new page doesn't. I tested it in my console on /about-mobile.html and it seemed to work, but I'm unsure if you couldn't use that for some reason.
I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()
I'm working on a wordpress blog and I want to add simple JS script to one of my pages. But when you go to edit->text and I add my script in <scirpt> tags it's not working. So I want to know how to insert the script or a .js file with the script in it? I have access only to the wp-admin and I don't have access to the files. Can someone suggest some ways to solve this?
Thank you in advance
I'm not too sure I understand your question 100%, but I'm gonna try to answer the best I can.
If you're adding the JavaScript via Wordpress's Page/Post text editor, you have to make sure you're using the HTML editor (not visual).
That would be step 1.
Step 2 would be adding the script itself. Make sure you don't have any line breaks in between your code, or it will break (learned that from experience)
For example, this will work:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
This will not:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
At least, that's what I found with the versions of Wordpress that I'm using (dunno about their latest release)
Hope this helps!
Good luck.
I have the following:
POST page that allows users to write text in CKEditor
VIEW Page, that views the text in CKEditor
How can I make CKEditor in the view page READ only, meaning the user can not edit the text in the note? The reason I want to use CKEditor in the view page is for 2 reasons:
1. I can use JavaScript to move the editor from disabled to enabled
2. Keep the styles the same from the POST & View page.
Is this possible? Thanks!
B
not sure if you are still looking for an answer but here is what I did and it was much simpler than the work around they suggest.
<script type="text/javascript">
window.onload = function () {
CKEDITOR.on("instanceReady", function (ev) {
var bodyelement = ev.editor.document.$.body;
bodyelement.setAttribute("contenteditable", false);
});
CKEDITOR.replace('editor1');
};
</script>
Check this CKEditor forum entry where the issue is discussed, and a CKEditor team member provides a workaround.
An important update to this thread, as of 3.6 this is supported by:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly