I've found some Javascript code on the web for toggling between two images when clicking on them as in this example.
Now I wonder how to achieve the same result using divs with the pictures being inside the divs.
Both the small and the large image will each be the background image of a div which is inside another div that forms the border (I need to do this to be able to set the inner border radius of the image, which I can when I use an inner div and set its border radius). So I have:
<div class="bordersmallpicture"><div class="smallpicture"></div></div>
and
<div class="borderlargepicture"><div class="largepicture"></div></div>
How can I tell Javascript to toggle between those two div couples instead of images? Here is the Javascript code that I found for the images:
<script>
var imageURL = "small-picture.png";
if (document.images) {
var smallpicture = new Image();
smallpicture.src = "small-picture.png";
var largepicture = new Image();
largepicture.src = "large-picture.png";
}
function changeImage() {
if (document.images) {
if (imageURL == "large-picture.png") {imageURL = "small-picture.png";}
else {imageURL = "large-picture.png";}
document.myimage.src = imageURL;
}
}
</script>
And the HTML part:
<img src="small-picture.png" name="myimage" title="Click to resize" alt="tree">
Can anyone give me a hint how to edit this code to toggle between the div couples mentioned above? Or will a whole new code be necessary when dealing with divs?
You simply need to toggle the classes. See a running example using your images as CSS background in the classes:
<div id="border-div" class="bordersmallpicture">
<div id="image-div" class="smallpicture"></div>
</div>
The the Javascript becomes:
<script>
function changeImage() {
var currentClass = document.getElementById('border-div').className;
if(currentClass == 'borderlargepicture') {
document.getElementById('border-div').className = 'bordersmallpicture';
document.getElementById('image-div').className = 'smallpicture';
} else {
document.getElementById('border-div').className = 'borderlargepicture';
document.getElementById('image-div').className = 'largepicture';
}
}
</script>
If you expect using javascript a lot, I recommend using jQuery which would make the code easier:
<script>
function changeImage() {
$('#border-div').toggleClass('bordersmallpicture').toggleClass('borderlargepicture');
$('#image-div').toggleClass('smallpicture').toggleClass('largepicture');
}
</script>
toggleClass turns ON/OFF a class (Here is the example)
Related
I have an 'overview' html page with lots of product images - each image links to a page that may have 3 or 4 products, eg, src="gadgets-1.html"
On desktop, on the destination page the user can see most products or can easily scroll down if needed.
But on narrow screen where the css MQs convert all columns to 100% width, the last items are not necessarily in view and the user must intuit that it's necessary to swipe down the page, so I want the linking image to link directly to the relevant item on the destination page.
I've established anchor links which work well, eg, src="gadgets-1.html#red-thing" but I don't want the '#red-thing' to be active on wider screens.
To resume, I want the link to be gadgets-1.html on wider screen and
gadgets-1.html#red-thing on narrow screen.
I don't see how this can (or should) be done with css. Should js or php be used? If so, how?
There are a couple of solutions I can think off of the top of my head. I don't usually like using javascript to modify the DOM based on screenwidth but it is an acceptable solution if you are so inclined.
OR you can do something simple like this:
<div class="links">
<a class="mobileLink" href="gadgets-1.html#red-thing">gadgets-1</a>
<a class="desktopLink" href="gadgets-1.html">gadgets-1</a>
</div>
with some css to hide the right link based on screen width
.mobileLink{
display: none;
}
#media screen and (max-width: 992px) {
.mobileLink{
display: inline-block;
}
.desktopLink{
display: none;
}
}
A flexible solution would be to use Javascript with a specific data- attribute for storing the different anchor names.
HTML:
<a class="targetLink" href="/link1" data-anchor="anchor-name1">Target link</a>
<a class="targetLink" href="/link2" data-anchor="anchor-name2">Target link</a>
To execute the code cross-browser on DOM ready and window resize, jQuery would be useful.
Check CodePen here
$(document).ready(function() {
var $target = $(".targetLink");
var $window = $(window);
var breakpoint = 640;
var linkSmall = false;
function checkWidth() {
if ($window.width() <= breakpoint) {
// appends anchors to links
if(!linkSmall){
$target.each(function(index) {
var href2 = $(this).attr("href") + "#" + $(this).attr("data-anchor");
$(this).attr("href", href2 );
});
linkSmall = true;
}
}else{
// removes anchors to links
if(linkSmall){
$target.each(function(index) {
var href1 = $(this).attr("href");
var a = href1.indexOf('#');
var href2 = href1.substring(0, a != -1 ? a : href1.length);
$(this).attr("href", href2 );
});
linkSmall = false;
}
}
}
checkWidth(); // on document ready
$(window).resize(checkWidth); // on window resize
});
As you don't want to repeat anchor elements(as per the other threads), you won't be able to do it with css so you'll have to use js.
if(window.innerwidth < 911){
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_small_screen_devices);
}else{
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_normal_desktop_and_bigger_devices");
}
you can use a loop to repeat the same process for all anchors with using proper selectors.
I am looking to contain my image sizes once they have been clicked on,
currently they are shown larger than I wish for them to appear.
Example: http://messaages.com/post/144951542174
HTML: https://gist.github.com/anonymous/4f09e3306f9b28ee0dce286342c51c7e
I have played around with various sizes within the code but I can't seem to be able to change it.
If you want to change the image sizes once they are clicked on you will want to use javascript to change the css.
<img onclick="imageChange(this)" style="width: 200px; cursor: pointer;" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<script>
window.imageChange = function(image) {
if (image.style.width === "200px") {
image.style.width = "100px";
} else {
image.style.width = "200px";
}
}
</script>
JS Fiddle: https://jsfiddle.net/ws12fqzc/
I'm using a script to do a mouseover effect with images and also highlighting text in a different color using the getElementById phrase. I understand that an ID can only be used once, and if it needs to be used more than once I should use class. But there is no getElementByClass function. I have 2 areas of type that I want to highlight, one is centered, the other is left justified. Is there a way to use the same id for both styles?
<div id="georgia">
<style="text-align: center;">
<strong>Headquarters:
</strong>
</style>more text here
</div>
This is the script I am using:
<script type="text/javascript">// < ![CDATA[
function on(el) {
if (document.getElementById(el)) {
document.getElementById(el).style.color="green";
};
};
function off(el) {
if (document.getElementById(el)) {
document.getElementById(el).style.color="";
};
};
// ]]></script>
So what you are saying is I can replace the getElementById with getElementByClassName then it will work?
This is the format I'm using, the first part of the text (Headquarters) is not showing up, but the second part (more text here) is fine.
You need to use document.getElementsByClassName, which returns a list of the objects with that class name:
var all = document.getElementsByClassName("bar");
for(var i = 0; i < all.length; i++){
var obj = all[i];
obj.style.fontWeight = 'bold';
}
<div id="foo" class="bar">hi</div>
<div class="bar">bye</div>
<div id="bar">sup</div>
I have one big div with id="elements" and I load from JSON file new elements objects and I need that for every element create new div inside elements ( elements div should contain lot off smaller divs, for every element one small div ). How to place this small divs inside this big div one behind another ? How to add this small divs a class style ?
In Dojo (since you have the dojo tag):
var div_elements = dojo.byId("elements");
dojo.forEach(json_data.items, function(item) {
dojo.create("div", { "class":"whatever " + item.classNames }, div_elements);
});
Of course, you can put anything as the class for your div. I just provided an example. In the second argument to dojo.create, you pass in a hash containing all the properties you want that div to have.
Create a new DOM element like so:
var childDiv = document.createElement('div');
Then add to the outer div like so:
var insertedElement = div.insertBefore(childDiv, null);
You would then keep creating childDivs as you iterate over your JSON data, and inserting them into the div Node as above.
I think you need something like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
json_data = 'Hey';
$('#elements').append('<div class="in_elements">' + json_data + '</div>');
});
</script>
<div id="elements">
</div>
Test it
There a simple jQuery functions for that:
var box= $("#elements");
// create elements
for (var i=0; i<items.length; i++) {
var t = $("<div class=\"element\" id=\"item_"+i+"\">"+items[i]['text']+"</div>");
box.append(t);
}
That's what you where looking for?
hi i have to implement find and replace functionality in my project. in this functionality there is one find and replace button on the top of contenteditable div. when user click on this button, popup window will open and ask for the search word when specify word and press find it will find word in that div only. and if match found it will highlight that word. so anybody tell me how can i highlight word in div. its urgent so please . thank you.
<div id="test" contenteditable="true">
this is test <font class='classname'> some text test</font>
</div>
i want to high light only test word not else
You will need to search through the div to find the word and then put that word into a span, and change the background color of the span.
Edit: I just noticed that you are not using CSS, so you will need to insert a font tag to change the color.
I just stole this from Sphix, the documentation tool:
/**
* highlight a given string on a jquery object by wrapping it in
* span elements with the given class name.
*/
jQuery.fn.highlightText = function(text, className) {
function highlight(node) {
if (node.nodeType == 3) {
var val = node.nodeValue;
var pos = val.toLowerCase().indexOf(text);
if (pos >= 0 && !jQuery.className.has(node.parentNode, className)) {
var span = document.createElement("span");
span.className = className;
span.appendChild(document.createTextNode(val.substr(pos, text.length)));
node.parentNode.insertBefore(span, node.parentNode.insertBefore(
document.createTextNode(val.substr(pos + text.length)),
node.nextSibling));
node.nodeValue = val.substr(0, pos);
}
}
else if (!jQuery(node).is("button, select, textarea")) {
jQuery.each(node.childNodes, function() {
highlight(this)
});
}
}
return this.each(function() {
highlight(this);
});
}
/**
* helper function to hide the search marks again
*/
hideSearchWords : function() {
$('.sidebar .this-page-menu li.highlight-link').fadeOut(300);
$('span.highlight').removeClass('highlight');
},
/**
* highlight the search words provided in the url in the text
*/
highlightSearchWords : function() {
var params = $.getQueryParameters();
var terms = (params.highlight) ? params.highlight[0].split(/\s+/) : [];
if (terms.length) {
var body = $('div.body');
window.setTimeout(function() {
$.each(terms, function() {
body.highlightText(this.toLowerCase(), 'highlight');
});
}, 10);
$('<li class="highlight-link"><a href="javascript:Documentation.' +
'hideSearchWords()">' + _('Hide Search Matches') + '</a></li>')
.appendTo($('.sidebar .this-page-menu'));
}
},
So, adding this to a js file in your site, any page with it that receives a highlight GET parameter will search and highlight the word in the page.
You can find a demo of the working code in:
http://sphinx.pocoo.org/intro.html?highlight=python
Note: This code needs jQuery, off course...
Its actually pretty easy using the prototype library:
<html>
<head>
<style type="text/css">
#content span {
background-color: yellow;
}
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
Event.observe(window,'load',function(){
var htm = $('content').innerHTML;
$('content').innerHTML = htm.sub('my','<span>my</span>');
});
</script>
</head>
<body>
<div id="content">
This is the div containing my content.
</div>
</body>
</html>
This should get you started so you can implement the rest.
To highlight a word you have to select it somehow. One option is to surround the word with a span tag.
this is <span class="highlight">test</span> some text test
then specify CSS for the highlight class.