I have a panel code pane that displays this code to show/hide the content if a field, it works great but I want the code to just not display anything if there is no content in %node:field_desc6
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show Non-CGD Publications";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Non-CGD Publications";
}
}
</script>
<a id="displayText" href="javascript:toggle();">Show Non-CGD Publications</a>
<div id="toggleText" style="display: none">%node:field_desc6</div>
Try This :
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show Non-CGD Publications";
}
else {
ele.style.display = "block";
text.innerHTML = ""; // here you don't put any text...
}
}
</script>
<a id="displayText" href="javascript:toggle();">Show Non-CGD Publications</a>
<div id="toggleText" style="display: none">%node:field_desc6</div>
Related
This code is for writing text on the image .. I had trouble saving the image, I cannot save it to the phone
I got a solution here and succeeded in saving the pictures to the phone ..
In answer number 1
Save image to local automatically
but I couldn't use it for my code
function myFunction() {
document.getElementById("canvas").style.display = "block";
var x = document.getElementById("myText").value;
//demoo document.getElementById("demo").innerHTML = x;
addTextToImage("https://l.top4top.io/p_1549mpaz31.png", x);
}
function addTextToImage(imagePath, text) {
var circle_canvas = document.getElementById("canvas");
var context = circle_canvas.getContext("2d");
// Draw Image function
var img = new Image();
img.src = imagePath;
img.onload = function () {
context.font = "40px Cairo";
context.textAlign = "center";
context.drawImage(img, 0, 0);
context.lineWidth = 1;
context.fillStyle = "#ffffff";
context.lineStyle = "#ffff00";
context.fillText(text, 520, 790);
}
}
#import url('https://fonts.googleapis.com/css?family=Cairo:300,400,600,700,900');
.container {
position: relative;
font-family: Arial;
font-family: 'Cairo';
}
<canvas style="display:none" id="canvas" width="1080" height="1080"></canvas>
<input type="text" id="myText" value="write your name">
<button onclick="myFunction()">button</button> ..
<p id="demoo"></p>
I have added a codepen for you. Please check and let me know if you have any more query. I just focused on how you can download image from canvas. I think that is your most concerned issue.
HTML
<input type="text" id="text" placeholder="write your name">
<button onclick="writeText()">Show Image</button>
<button onclick="download()">Download Image</button>
<canvas id="canvas" width="200" height="200"></canvas>
JS
function writeText() {
console.log("Hello")
var canvas = document.getElementById("canvas");
var name = document.getElementById("text").value;
if(name.trim() == "" || name.trim().length == 0) {
alert("Write something in the text box first");
return;
}
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(name, 10, 50);
}
function download() {
writeText()
var link = document.createElement('a');
link.download = 'text.png';
link.href = document.getElementById("canvas").toDataURL()
link.click();
}
https://codepen.io/kousik-mandal/pen/RwWjmqM
Thank you.
I'm developing a react application and I recently start to use semantic ui react module.
Unfortunately I'm not able to make the Tab object responsive...
A really simple script to show this is:
import React from 'react'
import { withRouter } from 'react-router-dom'
import {Tab} from 'semantic-ui-react';
// import NavSection from './NavSection'
var sections = ["SectionA","SectionB","SectionC","SectionD","SectionE","SectionF"]
const NavigatorHeader = () => (
<div>
<h1>Navigator</h1>
<div>
<Tab menu={{ pointing: true }} panes={getPanes(sections)} />
</div>
</div>
)
export default withRouter(NavigatorHeader)
function getPanes(sections){
return sections.map( function(section){
return {
menuItem: section,
render: () =>
<Tab.Pane attacched="false">
<div>
<p>
Some Text that we can change tab from tab. E.g. with the title: <b>{section}</b>
</p>
</div>
</Tab.Pane>
}
})
}
The tabs look great, inline, but if I reduce the screen they just overflow, while I was expecting they would have moved to a second line.
Look like that this is coming from the Selenium-ui css I'm using (https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css). Current version is 2.3.1 but if I go back to use a version before 2.0.0, it was responsive.. is there a way to obtain the same behavior with the new version?
Thanks,
Michele.
Thanks,
Michele.
Based on the previous answer I found an easier way to achieve this.
I defined a CSS with the values suggested:
.wrapped{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
and then just passed that additional class to the menu
<Tab menu={{ pointing: true, className: "wrapped" }} panes={getPanes(sections)} />
That solved the problem without any additional javascript.
Here is a solution that I created some time ago in regular Semantic. It behaves like Bootstrap and does not require a second set of menu items. It requires just a tiny bit of JS and CSS.
The JS:
$(function() {
// Set up to handle wrapping of tab menu (tab actuator) items
$(window).resize(function() {
checkIfWrapped();
});
checkIfWrapped(); // Make sure the function is fired upon document ready
});
// Detect whether a Semantic UI tabular menu is wrapped
function checkIfWrapped() {
var pos_top_1st = $('.tabular.menu .item').first().position().top;
$('.tabular.menu .item:not(first-child)').each(function() {
var pos_top = $(this).position().top;
if (pos_top > pos_top_1st) {
$(this).parent().addClass('wrapped');
return;
} else if (pos_top == pos_top_1st) {
$(this).parent().removeClass('wrapped');
}
});
The HTML structure. (Note that placing the .tabular.menu .item-s inside a div within the overall .tabular.menu allows the use of a separate .right.menu within the .tabular.menu if desired) :
<div id="tabs-menu" class="ui top attached tabular menu">
<div id="qj-tabs">
<div class="tab item"></div>
<div class="tab item"></div>
<div class="tab item"></div>
</div>
<div class="right menu">
<a class="tab item"><i class="add icon"></i> Add Job</a>
<a class="tab item"><i class="copy icon"></i> Copy Item</a>
</div>
</div>
<div class="botttom attached tab segment"></div>
<div class="botttom attached tab segment"></div>
</div>
The CSS:
#qj-tabs {
display: flex !important; /* Will not work unless defined as display: flex */
flex-direction: row !important;
flex-wrap: wrap !important;
}
#tabs-menu .wrapped .item {
border-radius: 5px !important;
border: 1px lightgray solid !important; /* Just styling for the default theme here */
margin: 0 2px 2px 0 !important;
}
#tabs-menu .wrapped .active.item {
background-color: lightgray;
}
This is what i did some weeks ago in regular Semanitic-ui.
! function($) {
var WinReszier = (function() {
var registered = [];
var inited = false;
var timer;
var resize = function(ev) {
clearTimeout(timer);
timer = setTimeout(notify, 100);
};
var notify = function() {
for (var i = 0, cnt = registered.length; i < cnt; i++) {
registered[i].apply();
}
};
return {
register: function(fn) {
registered.push(fn);
if (inited === false) {
$(window).bind('resize', resize);
inited = true;
}
},
unregister: function(fn) {
for (var i = 0, cnt = registered.length; i < cnt; i++) {
if (registered[i] == fn) {
delete registered[i];
break;
}
}
}
};
}());
var TabDrop = function(element, options) {
this.element = $(element);
var $this = this;
this.dropdown = $('<div class="ui item right dropdown" data-popup data-content="' + options.text + '" data-position="bottom center">' +
options.icon +
'<div class="menu"></div>' +
'</div>').appendTo($this.element);
this.click = function() {
$this.element.removeClass("pointing");
$this.element.find("a.item").not(this).removeClass("active");
};
this.reverseclick = function(el) {
$this.element.find(".item.right.dropdown .menu a.item").removeClass("active selected");
$this.element.addClass("pointing");
};
WinReszier.register($.proxy(this.layout, this));
this.layout();
$(".ui.dropdown").dropdown();
$("[data-popup]").popup();
};
TabDrop.prototype = {
constructor: TabDrop,
layout: function() {
var $main = this;
var $this = this.element;
var $drpdwn = this.dropdown;
var $fullwidth = $this.width() - 25;
this.element
.append($drpdwn.find('.ui.item.right'))
.find('a.item')
.not('.item.right.dropdown')
.each(function() {
var $blockLenght = parseInt($(this).width());
var $space = $fullwidth - $blockLenght;
if ($space > $blockLenght) {
$(this).click($main.reverseclick)
if ($drpdwn.find('.menu a').length > 0) {
var $reverse = $drpdwn.find('.menu a:first-child');
$reverse.click($main.reverseclick).removeClass("selected")
$reverse.insertBefore($drpdwn);
}
} else {
var $dropItem = $(this)
$dropItem.click($main.click)
$drpdwn.find('.menu').append($dropItem);
}
$fullwidth = $space;
});
}
};
$.fn.tabdrop = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('tabdrop'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('tabdrop', (data = new TabDrop(this, $.extend({},
$.fn.tabdrop.defaults, options))));
}
if (typeof option == 'string') {
data[option]();
}
});
};
$.fn.tabdrop.defaults = {
text: 'More',
icon: '<i class="icon align justify m-0"></i>'
};
$.fn.tabdrop.Constructor = TabDrop;
}(window.jQuery);
var Tabs = {
tabDrop: function() {
setTimeout(function() {
$('.tabdrop').tabdrop({
text: 'More Configuration'
});
}, 1000)
}
};
$(document).on("ready", function() {
$('.menu .item').tab();
Tabs.tabDrop();
$(window).resize(function() {
Tabs.tabDrop();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
<div class="ui top attached pointing menu tabdrop">
<a class="item" data-tab="tab1">Tab Item 1</a>
<a class="item" data-tab="tab2">Tab Item 2</a>
<a class="item" data-tab="tab3">Tab Item 3</a>
<a class="item" data-tab="tab4">Tab Item 4</a>
<a class="item" data-tab="tab5">Tab Item (A very long tab title)</a>
</div>
I have two columns in my fusion table, both store the names of icons. One of the tables is the default icons.
I'm wondering if there is a way to toggle between the two columns to change icons in JavaScript?
Cheers
set up two maps in the FusionTables UI with the appropriate columns defining the icons (Fusion Tables Help article describing how to do that)
"publish" the map, get HTML and Javascript, that will contain the values to use for styleId and template for each configuration.
call .setOptions on the FusionTablesLayer to change between them
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>Astraptes fulgerator- demo data - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
height: 300px;
margin: 0;
padding: 0;
width: 500px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
google.maps.visualRefresh = true;
var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
(navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
if (isMobile) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
}
var mapDiv = document.getElementById('googft-mapCanvas');
mapDiv.style.width = isMobile ? '100%' : '500px';
mapDiv.style.height = isMobile ? '100%' : '300px';
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(10.902224578468406, -85.43183000000005),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col12",
from: "1_DWHpdjPNGQwVZU5OLbMMS-6yrbIY4wTGJoRMLg",
where: ""
},
options: {
styleId: 3,
templateId: 3
}
});
if (isMobile) {
var legend = document.getElementById('googft-legend');
var legendOpenButton = document.getElementById('googft-legend-open');
var legendCloseButton = document.getElementById('googft-legend-close');
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
legendCloseButton.style.display = 'block';
legendOpenButton.onclick = function() {
legend.style.display = 'block';
legendOpenButton.style.display = 'none';
}
legendCloseButton.onclick = function() {
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input type="button" value="change A" onclick="layer.setOptions({styleId:2, template:2});"></input>
<input type="button" value="change B" onclick="layer.setOptions({styleId:3, template:3});"></input>
<div id="googft-mapCanvas"></div>
</body>
</html>
I need help to create a sidebar. I have it partially working, but there are 2 problems to solve. First, the sidebar only shows the last marker information. I may not have placed some of the sidebar coding in its proper place. Second, (which may be part of the first problem), all the icons appear when using Firefox, but when using IE8 all the icons except the last icon appears. To view the map and code, first go to http://www.askdata.net/propmap/mapdata.php and do the demo (paste addresses into text area), then the map page will be displayed. Thanks again. The code also follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<h1>'Comparables Map'</h1><!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Comparables Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
Subject: {
icon: 'http://askdata.net/compmap/mapicons/sub.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp1: {
icon: 'http://askdata.net/compmap/mapicons/c1.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp2: {
icon: 'http://askdata.net/compmap/mapicons/c2.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp3: {
icon: 'http://askdata.net/compmap/mapicons/c3.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp4: {
icon: 'http://askdata.net/compmap/mapicons/c4.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp5: {
icon: 'http://askdata.net/compmap/mapicons/c5.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp6: {
icon: 'http://askdata.net/compmap/mapicons/c6.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(41.95, -87.65),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + type + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
draggable: true,
icon: icon.icon
//shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(41, -87), 4);
return;
}
var sidebarEntry = createSidebarEntry(marker, type, address);
sidebar.appendChild(sidebarEntry);
}
});
function createSidebarEntry(marker, type, address) {
var div = document.createElement('div');
var html = '<b>' + type + '</b>' + address;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'click', function() {
google.maps.event.trigger(marker, 'click');
});
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<br/>
<br/>
<div style="width:1200px; font-family:Arial,
sans-serif; font-size:11px; border:1px solid black">
<table>
<tbody>
<tr id="cm_mapTR">
<td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 700px; font-size: 11px; color: #000"></div>
</td>
<td> <div id="map" style="overflow: hidden; width: 1000px; height: 700px"></div> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
IE doesn't like trailing commas at the end of a structure, e.g. the comma after the icon here:
Comp5: {
icon: 'http://askdata.net/compmap/mapicons/c5.png',
}
You're mixing Google Maps API 2 and 3 code. e.g. you declare latlng objects using API 3:
center: new google.maps.LatLng(41.95, -87.65)
but then you use API 2 here:
map.setCenter(new GLatLng(41, -87), 4);
Here is your problem: sidebar.innerHTML = '';
Since it is within the loop, every time it loops, it deletes the prior side bar entry.
Place it fight after function load() { -Outside the loop AND within Load().
Use document.getElementById('sidebar').innerHTML = '';
Also, you have to do something about your customIcons
You can change them to something like this
Subject: { icon: 'http://askdata.net/compmap/mapicons/sub.png' }
And you are done!
EXAMPLE
function load() {
document.getElementById('sidebar').innerHTML = '';
var map = new google.maps.Map(document.getElementById("map"), {
//rest of the code goes here
Also, it might be a good idea to replace this code with CSS:
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
CSS option:
#sidebar {
background-color: white;
}
#sidebar div {
cursor: pointer;
margin-bottom: 5px;
}
#sidebar div:hover {
background-color: #eee;
}
I am having a Html hyperlink. I need to link this hyperlink to another page.When I place the mouse over the link. It should show the image.
how to do this
That depends on where you need to display the image. If you are looking for something along the lines of an icon next to or behind the link, you could accomplish this through CSS using a background image on the hover state of the link:
a:link
{
background-image:none;
}
a:hover
{
background-image:url('images/icon.png');
background-repeat:no-repeat;
background-position:right;
padding-right:10px /*adjust based on icon size*/
}
I did this off the top of my head, so you may need to make some minor adjustments.
If you wanted to show an image somewhere else on the page, you could accomplish that using javascript to hide/show the image on the link's mouseover event.
If this doesn't solve your problem, maybe you could supply some additional information to help guide everybody to the right answer.
You can do this easily with jquery:
$("li").hover(
function () {
$(this).append($("<img src="myimage.jpg"/>"));
},
function () {
$(this).find("img:last").remove();
}
);
Some more comprehensive examples which are actually tested:
http://docs.jquery.com/Events/hover
you can do this using javascript..
This will create a square that follows your mouse on div or element hover.
Create a .js file with those contents here:
var WindowVisible = null;
function WindowShow() {
this.bind = function(obj,url,height,width) {
obj.url = url;
obj.mheight = height;
obj.mwidth = width;
obj.onmouseover = function(e) {
if (WindowVisible == null) {
if (!e) e = window.event;
var tmp = document.createElement("div");
tmp.style.position = 'absolute';
tmp.style.top = parseInt(e.clientY + 15) + 'px';
tmp.style.left = parseInt(e.clientX + 15) + 'px';
var iframe = document.createElement('iframe');
iframe.src = this.url;
iframe.style.border = '0px';
iframe.style.height = parseInt(this.mheight)+'px';
iframe.style.width = parseInt(this.mwidth)+'px';
iframe.style.position = 'absolute';
iframe.style.top = '0px';
iframe.style.left = '0px';
tmp.appendChild(iframe);
tmp.style.display = 'none';
WindowVisible = tmp;
document.body.appendChild(tmp);
tmp.style.height = parseInt(this.mheight) + 'px';
tmp.style.width = parseInt(this.mwidth) + 'px';
tmp.style.display = 'block';
}
}
obj.onmouseout = function() {
if (WindowVisible != null) {
document.body.removeChild(WindowVisible);
WindowVisible = null;
}
}
obj.onmousemove = function(e) {
if (!e) e = window.event;
WindowVisible.style.top = parseInt(e.clientY + 15) + 'px';
WindowVisible.style.left = parseInt(e.clientX + 15) + 'px';
}
}
}
Then in your html do the following:
Include the .js file <script type="text/javascript" src="myfile.js"></script>
Put in your web page:
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
Here is a full implementation in a HTML:
<html>
<head>
<title>test page</title>
<style>
div.block { width: 300px; height: 300px; background-color: red; }
iframe { border: 0px; padding: 0px; margin: 0px; }
</style>
<script type="text/javascript" src="window_show.js"></script>
</head>
<body>
<div id="go1" style="background-color: red; width: 200px; height: 200px;"></div>
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
</body>
bye bye!