Develop Reference

is there an alternative for building dropdown menu from json? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
recently a see a project for build form from json
https://github.com/mozilla-services/react-jsonschema-form
I need to know if there is any way to do menu from json
i need to build a menu with simple procedures like this that actives with mouseenter and mouseleave
please help me

You will need to create your own interface and controller. I will try to give a idea . Create function for adding html div tags from code .
Create json like this or load from file (same staff) - (use httprequest if you wanna json from file or remote server) :
//html code
<div id="menuHolder" style="width:200px;height:60px" ></div>
// generic from code example
var MENU_DATA = {
"DisplayText" : "Select drop menu" ,
items : [ "select1" , "select2" , ... , "selectn"]
};
function refreshMenu(){
// clear holder
document.getElementById("menuHolder").innerHTML = "";
for (var x=0;x<MENU_DATA.items.length;x++) {
// i use simple method for creating divs but this is better
// look at [Answer for nice creating dom elements][1]
document.getElementById("menuHolder").innerHTML += "<div id='id_"+x+"' onclick='CLICK_METHOD("+x+")' > "+ MENU_DATA.items[x] +" </div>";
}
}
function CLICK_METHOD (IndexOfClicedItem) {
if (IndexOfClicedItem == 1) {
CALL_EVENT_FOR_SELECT1()
}
}
// For working like drop menu you will need to add click event on holder .
// Create var for status OPENED / CLOSED menu
// On open make height for example 500px on close back to 60px
// Need css for overflow hidden for holder div ...
I hope this all is 2h of work ...
Call on the end refreshMenu() , also you can edit it any time just call refreshMenu() to make new html look .
Style of dinamic added divs also need style setup , like width: 100%
Try absolute / relative . Use one Special Select from list , they will append text from clicked drop item .
Answer for nice way of creating dom elements

Change the text of links with an specific class, using javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am looking for a way to replace the text of all the links with an specific class, using javascript (not jquery). I would like all the links with that specific class, to have a generic text such as: "click here".

I would use getElementsByClassName to acquire an array of the links. You can then loop through these elements making any changes required.
Heres a Fiddle that also includes some validation to only chenge the text of anchor tags in case you use targetClass for anything else in other elements.
EDIT: looks like other beat me to it :-) (also fixing type in function)

var links = document.querySelectorAll(".yourclass");
for (var i=0; i<links.length; links++)
{
links[i].innerHTML = "click here";
}

This should do the trick. It's using ES6, so make sure you're using either Chrome Canary or a transpiler like Babel.
Say this is your markup...
<a class="classname" href="#">STUBBED</a>
<a class="classname" href="#">MOCKED</a>
<a class="classname" href="#">PLACEHOLDER</a>
This as your JS should work...
let refs = document.getElementsByClassName('classname');
refs = [].slice.apply(refs);
refs.forEach(ref => ref.innerHTML = 'click here');

function myFunction() {
var c = document.querySelectorAll(".example>a");
for(i=0;i<c.length;i++)
{
c[i].innerHTML = "Click Me!";
}
}
This should do the trick in pure javascript

How can i make adaptive block and add there blocks? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
So, i have this html code:
<div class = "form_wrappers">
<div class = "form">Hello
</div>
</div>
<a class = "destiny_add">
And jQuery code:
function addBlock() {
$('.destiny_add').on('click', function (e) {
e.preventDefault();
$('.form_wrappers').append($('form'))
});
}
I want to add a lot of <div class = "form"> in <div class = "form_wrappers>
How can i make it?
Now it tottaly does not work

There are a couple of issues with your code.
Your jquery is inside the function 'addBlock' which is never called.
You're missing the dot in your append $('form')
You need to append the html of the element, not the element itself.
I also included your code in the .ready() to make sure the elements are loaded before jquery tries to run it.
See the code below
$(function() {
$('.destiny_add').on('click', function (e) {
$('.form_wrappers').append('<div class="form">'+$('.form').html()+'</div>');
});
})

With jQuery, can you add an HTML element like this? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm doing this tutorial and this guy says, "I'm going to create a div..."
$("document").ready(function() {
// fetch the AJAX content
$("#newsContent").load("news.txt");
//$.getJSON("news.json", successFn);
});
function successFn(result) {
$.each(result.newsStories, function(i, item) {
// Didn't quite understand what this line did.
var newsDiv = $("<div class='news'>");
newsDiv.append(item.title);
newsDiv.append(item.content);
// Now understand that this puts the above div in play.
$("#newsContent").append(newsDiv);
});
}
I'm really only worried about this line:
var newsDiv = $('<div class="news">');
I've tried this on jsfiddle, but it doesn't seem to work. This is happening during the construction of an AJAX request if that helps.
My question is, when does newsDiv become part of the DOM?

$('<div class="news">'); will return $ wrapped object corresponds to an html element (in this example, div element) to you. But not created any element at your html. You can simply add this newly created element to your html like,
$('#myNewsContainer').append(newsDiv); // append to the div with id 'myNewsContainer'
$('#myNewsContainer').html(newsDiv); // replace all html with new div

The line
var newsDiv = $('<div class="news">');
creates a variable newsDiv with value <div class="news">. At this moment it is not appended to html. You can append it to HTML using Jquery append() method.

jQuery count div, divided into two and add between them [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Tell me how to make a jQuery:
count <div class="one">, divided into two and add between them <div class="two">
/div class="one"/ can be a different number
JsFiddle

You want to add a div after the half of the one divs:
var count = Math.floor($('.one').length / 2);
$('.one').eq(count).after('<div class="two">d</div>');
Demo: https://jsfiddle.net/c8b8tnm3/2/

You can use a class selector to find all the one elements, then use its count(length property) to find its middle and insert the new element
var $ones = $('.one');
$ones.eq(Math.floor(($ones.length-1)/2)).after('<div class="two"></div>')
Demo: Fiddle

Try this, this may help you.
var ones=$('.one');
var indexofOne=$('.one').length/2;
indexofOne=Math.floor(indexofOne);
var insertPosition=$('.one')[indexofOne];
$(insertPosition).after($('<div class="two">'));
JSFiddle