I have been playing around with CSS Style Switching on my blog www.whataboutki.com and have also added Google Friend Connect. I would now like to change the colours of the GFC widget when the user changes styles. This is the script for GFC... the div id="div-1229769625913" does that mean I can access that from my css files? If so how would I go about doing so?
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1229769625913" style="width:260px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '385';
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-1229769625913',
site: '10794935298529647173'},
skin);
</script>
I'd experiment to see if div-1229769625913 changes between pages first. If it doesn't then you could restyle in your CSS files, otherwise you will have to change the colours for skin in your style-switcher (which I assume is JS).
The ID is generated by GFC. It populates the DIV with an iFrame hosting your gadget code on their *.gmodule.com servers
In theory you could access and modify their DOM after it's loaded to change their style
Try changing the values in the "skin" map for style
eg. skin['ALTERNATE_BG_COLOR'] = '#ffffff';
Good luck!
The div id stays the same between pages, however, it generates an iframe and the GFC gadget is displayed within that iframe. Your CSS stylesheets don't have any control over the styling of the contents of that iframe, so the only way to accomplish this would be with some javascript.
The simplest solution would be to rip out all of the values in that hash, and prior to rendering the gadget, substitute whatever values are appropriate based on the currently used stylesheet. That way you don't have to mess with the DOM of the iframe, which would be non-trivial and unreliably fragile, since Google doesn't expect you to do this.
So your code might look something like this:
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1229769625913" style="width:260px"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
function currentSkin() {
// Put some real code that detects what the
// right color scheme is here.
return 'VERY_BLUE';
}
var skins = {};
skins['VERY_BLUE'] = {};
skins['VERY_RED'] = {};
skins['VERY_BLUE']['HEIGHT'] = '385';
skins['VERY_BLUE']['BORDER_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ENDCAP_BG_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ENDCAP_TEXT_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ENDCAP_LINK_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ALTERNATE_BG_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_BG_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_LINK_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_TEXT_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_SECONDARY_LINK_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_SECONDARY_TEXT_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_HEADLINE_COLOR'] = '#0000ff';
skins['VERY_RED']['HEIGHT'] = '385';
skins['VERY_RED']['BORDER_COLOR'] = '#ff0000';
skins['VERY_RED']['ENDCAP_BG_COLOR'] = '#ff0000';
skins['VERY_RED']['ENDCAP_TEXT_COLOR'] = '#ff0000';
skins['VERY_RED']['ENDCAP_LINK_COLOR'] = '#ff0000';
skins['VERY_RED']['ALTERNATE_BG_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_BG_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_LINK_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_TEXT_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_SECONDARY_LINK_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_SECONDARY_TEXT_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_HEADLINE_COLOR'] = '#ff0000';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-1229769625913',
site: '10794935298529647173'},
skins[currentSkin()]);
</script>
Related
Here is the code snippet:
I am trying to click on Building Div based upon the title attribute value of class card-details__title.
Thanks
U need javascript for this.
Add the following code just before the </body> tag.
<script>
<!-- get elements from DOM -->
var titleDiv = document.getElementsByClassName('card-details__title')[0];
var detailDiv = document.getElementsByClassName('card-details__action')[0];
<!-- get title from tag -->
var titleTxt = titleDiv.getAttribute("title");
if (titleTxt==='add your condition text here'){
<!-- click the div if title matches the one you need -->
detailDiv.click();
}
</script>
Thanks #Charitra, I need this piece of code for automation and I tweak around and end up having a following code which go through all the listed owners and found the intended one and then click on its building link.
<!-- get the total number of elements from DOM -->
var totalOwners = document.querySelector('app-landlords-list > div > div').childElementCount;
var j=0;
for (var i = 0; i < totalOwners; i++) {
<!-- get elements from DOM -->
var titleDiv = document.getElementsByClassName('card-details__title')[i];
var detailDiv = document.getElementsByClassName('card-details__action')[j];
<!-- get title from tag -->
var titleTxt = titleDiv.getAttribute("title");
if (titleTxt=='Condition text')
{
<!-- click the div if title matches the one you need -->
detailDiv.click();
break;
}
j=j+3;
}
All:
Right now, I want to draw a svg and style it with external style. Everything goes well until I try to down load it:
function chartExporter(svg){
// svg is a D3 object
svg.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg");
var svgDOM = svg.node();
var html = svgDOM.outerHTML;
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
imgobj.src = imgsrc;
imgobj.onload = function(){
var a = document.createElement("a");
a.download = "sample.svg";
a.href = imgsrc;
a.click();
}
}
The problem here is: If I use D3 to add inline style or attributes, the svg downloaded seems good, but if I use external css file to include style, those styles can not be applied to svg when converted( it make sense, cos they are not in that html string), I wonder how to bring those style into svg?
Thanks
I am working with an SVG drawing. This has been created by another developer and delivered to me for use on a web site.
It uses the raphael.js vector graphics library to draw the map and animations.
It is inserted into the web page with two lines of javascript:
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="maine_map.js"></script>
My challenge is that I cannot get this svg file to appear where I need it to in the page. It needs to appear to the right of the slide show on this demo page:
http://owlpress.net/work/
Rather than appearing in the parent div I created for it, it appears floating at the bottom of the page. I've played with the CSS every which way, and I'm stumped. If anyone can help point me in the right direction, that would be wonderful.
Susan
In main_map.js you have:
// Insert the <div> into the body document.
document.body.appendChild(div);
This is the reason why it is generated after everything.
Create your own div + id and appendChild() to it instead body tag.
DEMO
var apme = document.getElementById('ap');
// Create the div we'll be slotting the map into and set it to the correct size.
var div = document.createElement('div');
div.setAttribute('id', "mobilize_maine_map");
div.style.width = "200px";
div.style.height = "200px";
div.style.borderWidth = "1px";
div.style.borderColor = "#000";
div.style.borderStyle = "solid";
// Insert the <div> into the heml document.
apme.appendChild(div);
Now , this div is inserted inside the div#ap. this div can be anywhere you wish inside your markup.
<edit>
you did :
// Create the div we'll be slotting the map into and set it to the correct size.
var div = document.createElement('div');
div.setAttribute('id', "mobilize_maine_map");
div.style.width = divWidth+"px";
div.style.height = divHeight+"px";
// div.style.borderWidth = "0px";
// div.style.borderColor = "#000";
// div.style.borderStyle = "solid";
// Insert the <div> into the heml document.
document.body.appendChild(div);
var apme = document.getElementById('map');
// Create the div we'll be slotting the map into and set it to the correct size.
var div = document.createElement('div');
div.setAttribute('id', "mobilize_maine_map");
div.style.width = "203px";
div.style.height = "306px";
div.style.borderWidth = "0px";
div.style.borderColor = "#000";
div.style.borderStyle = "solid";
// Insert the <div> into the heml document.
apme.appendChild(div);
This makes 2 div with same id and this is not what you look for :).
You should have removed this :
// Create the div we'll be slotting the map into and set it to the correct size.
var div = document.createElement('div');
div.setAttribute('id', "mobilize_maine_map");
div.style.width = divWidth+"px";
div.style.height = divHeight+"px";
// div.style.borderWidth = "0px";
// div.style.borderColor = "#000";
// div.style.borderStyle = "solid";
// Insert the <div> into the heml document.
document.body.appendChild(div);
and replace it with :
var apme = document.getElementById('map');
// Create the div we'll be slotting the map into and set it to the correct size.
var div = document.createElement('div');
div.setAttribute('id', "mobilize_maine_map");
div.style.width = divWidth+"px";
div.style.height = divHeight+"px";
// Insert the <div> into the heml document.
apme.appendChild(div);
I tried on the svg itself position: relative, left:1050, and bottom:909; and I at least got in the right general area.
I have an iframe that I use to display the main content of my webpage; however, I would like to make the IFRAME scroll regardless of where the mouse is pointing. I do not want my visitors to be confused by not being able to scroll unless their mouse is over the iframe. Is this possible? To scroll the iframe with the mouse hovering anywhere over the body?
I won't link any code, because the only relevant code I have is the < iframe>< /iframe> tag.
(the body itself is not scrollable with scrollbars hidden)
Alright. I put together a rather quick and dirty solution for this which includes the following steps:
Add an "id" to your <iframe> element. (In my example I used id="myFrame")
Attach the jQuery Mousewheel plugin to the header of your html page along with the latest jQuery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
Finally add the following javascript code at the end of the html body or after the iframe itself.
<script type="text/javascript">
var scrolloffset = 30; // amount of scrolling per mousewheel step
var myFrame = $('#myFrame'); // the iframe ID
var frameScrollPosition = 0;
$(window).mousewheel(function(event,delta){
// reset stored offset so that it matches with iframe's
frameScrollPosition = myFrame.contents().scrollTop();
var frameHeight = myFrame.contents().height() - myFrame.height();
if(delta > 0){
var newPosition = frameScrollPosition - scrolloffset;
} else {
var newPosition = frameScrollPosition + scrolloffset;
}
if(newPosition < 0){
newPosition = 0;
}
if(newPosition >= frameHeight){
newPosition = frameHeight;
}
frameScrollPosition = newPosition;
myFrame.contents().scrollTop(frameScrollPosition);
});
</script>
Make sure you download the plugin and not call it from github like me. It was just for testing and proof of concept.
We are using div tag in aspx and javascript functions to show context menu in our web application. In IE6 the sub menus in the context menu are getting displayed at the correct x and y coordinates what we have hard-coded in our application. But in IE7 and IE8, the sub menus are getting overlapped and in some machines the menus are going behind the window. Can any one please tell what is wrong or any other alternatives to display conext menu and submenu?
<HTML>
<HEAD>
<TITLE>Nested popup windows</TITLE>
<script>
var firstPopupDiv = null;
var popup = null;
var vpopup = null;
function tag_onclick()
{
var popup = window.createPopup();
var div = popup.document.createElement("DIV");
div.style.backgroundColor = "green";
div.style.width = 200;
div.style.height = 200;
div.onclick = div_onclick;
popup.document.body.appendChild(div);
firstPopupDiv = div;
vpopup = popup.document.parentWindow;
popup.show(30, 30, 200, 200, maindiv);
}
function div_onclick()
{
var fpopup = vpopup.createPopup();
fpopup.document.body.innerHTML = "<div id=\"MarkupSubMenu\" style=\"position:relative\"> Markups</div>";
fpopup.document.body.style.backgroundColor = "red";
fpopup.show(230, 30, 200, 200, firstPopupDiv); // Not shown at 230!
}
</script>
</HEAD>
<BODY>
<div id="maindiv" onclick="tag_onclick()">Click me</div>
</BODY>
</HTML>
As for alternatives, there are a lot of jQuery Context Menu plugins for jQuery.
Other than that, I'm afraid no one can really help you point out what's wrong with your code, without seeing your code...