I want to build a page where there are two main items on the top of the page, and according to whichever is clicked the content of the page changes to that products content.
For example, I have
<div class='item1'>
<img>
</div>
<div class='item2'>
<img>
</div>
<div class='contentItem1'>
</div>
<div class='contentItem1'>
</div>
<div class='contentItem1'>
</div>
<div class='contentItem2'>
</div>
<div class='contentItem2'>
</div>
<div class='contentItem2'>
</div>
I tried to give each item a key, so that I can target it with the data-id tag, however, that does not seem to work at all, or I am doing something wrong.
Any help would be much appreciated
Edit:
I should have added more info about how the structure looks like exactly:
#foreach($items as $key => $item)
<div data-id="{{$key}}" class="mainItem item{{key}}">
<img>
</div>
#endforeach
Afterwards a several content blocks will be generated for each of the main item:
#foreach($items as $key => $item)
<div class="contentBlock{{key}}" id="contentBlock">
<p>Content</p>
</div>
<div class="contentBlock{{key}}" id="contentBlock">
<p>Content</p>
</div>
<div class="contentBlock{{key}}" id="contentBlock">
<p>Content</p>
</div>
#endforeach
I hope it makes sense. What I would like to do here, once the page is opened, only the content for item 1 is visible, however, once item2 is clicked, its content becomes visible but the item1's hides.
Related
I have an html page (firstpage.html) divided into two parts; one split on the left and one split on the right.
I would like to add the content of a second html page (secondpage.html) on the right split, then through the appropriate div.
For example if I have the div shown below:
<div hr class="horiz">
<div class="split left">
<div class="centered">
<!-- here is the code that "fills" the left split -->
</div>
</div>
<div class="split right">
<div class="centered">
<!--Here I would like to add the entire content of the secondpage.html html page -->
</div>
</div>
I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">
Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="EmailsWrapper">
<div class="ExtendMsg">
<p>Extended Messages will be placed under here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User.png>
</div>
<div class=" EmailTitle">
<p class="EmailTime">9:31 PM</p>
<h1>Sender</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Email content to be filled out here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User2.png">
</div>
<div class="EmailTitle">
<p class="EmailTime">9:29 PM</p>
<h1>Sender2</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
</div>
</div>
<<done>>
<<script>>
$(".Email").on("click", function() {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".ExtendMsg").addClass("active");
$(".ExtendMsg").html($('
<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGES");
});
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".ExtendMsg").removeClass("active");
$(".headerLabel h1").text("MESSAGES");
});
<</script>>
<</done>>
I'm not totally sure what you are trying to achieve.
But I'd guess that you want to show and image, when ever you click something above?
If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.
If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:
First assign an identifier to your element to toggle (class or id):
<div class="ImgWrapper">
<img class="User2Image" src="Images/Phone Icons/User2.png">
</div>
Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.
I have very little JavaScript experience and no vue or react experience, so understanding these answers is proving to be futile. >.<
I found these 2 solutions
Alpine nested x-data
https://github.com/alpinejs/alpine/issues/49
This is the issue I am encountering.
I got the x-data and x-show to work for the collapse sidebar button.
When I added another x-data element in a child div that houses the content, it seems to break everything and nothing works.
Both the sidebar div, and content div are inside the parent div that controls the collapse button.
This is how the layout looks like
This is the code of how it is somewhat layed out
// Div that houses main content and sidebar
<div x-data="{sidebarActive: true}">
// Sidebar button
<div #click="sidebarActive =!sidebarActive"> collapse icon </div>
// kanban content
<div x-data ="{kanbanToggle: 2}">
// toggle buttons
<div>
<div #click="kanbanToggle: 1"> button 1 </div>
<div #click="kanbanToggle: 2"> button 2 </div>
<div #click="kanbanToggle: 3"> button 3 </div>
</div>
// kanban board content
<div>
<div x-show ="kanbanToggle ===1"> timeline view </div>
<div x-show ="kanbanToggle ===2"> card view </div>
<div x-show ="kanbanToggle ===3"> list view </div>
</div>
</div>
<div x-show="{sidebarActive:true}"> sidebar content </div>
</div>
Any help much appreciated! Thanks in advance!
The initial issue I can see with your code is that kanbanToggle: 1 is not valid JavaScript, the correct synax is kanbanToggle = 1.
So replace:
<div #click="kanbanToggle: 1"> button 1 </div>
<div #click="kanbanToggle: 2"> button 2 </div>
<div #click="kanbanToggle: 3"> button 3 </div>
with
<div #click="kanbanToggle = 1"> button 1 </div>
<div #click="kanbanToggle = 2"> button 2 </div>
<div #click="kanbanToggle = 3"> button 3 </div>
I'm creating a website and I'm having some trouble with javascript. I have this function:
function offerboxclick(obj) {
obj.classList.toggle("menuelementclicked");
}
and my html looks like this:
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
<level>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
</level>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
</div>
The css code I think isn't relevant, because the problem is probably with the js function. As you can see, I have a multi level menu, and it works just fine when I'm clicking on the level 0 element to show hidden level 1 elements. But when I click any of the level 1 elements, the js function does work properly on the object, because it toggles "menuelementclicked" class on it. The problem is that it also toggles this class in parent menu element, so at the same time it opens level 2 and closes whole menu. I don't really know what to do now. Any help would be appreciated!
P.S. I tried putting my code on jsfiddle to show you all of it but for some reason on it doesn't work there at all 0_o
I am unable to get the correct title for this, please change the title if you get appropriate one :)
This is what i am having
<div class="container">
<div class="innerContainer">
<div>
Div content Here [ always either embed or object or image ]
</div>
xtra noise
</div>
<div class="innerContainer">
<div>
Div content Here
</div>
xtra noise
</div>
<div class="innerContainer">
<div>
Div content Here
</div>
xtra noise
</div>
</div>
Now, what i need is this
http://sketchfu.com/drawing/876520-what-do-i-need-
Note sketchfu is pathetic for drawing.
Is there any jQuery plugin which can do this?
Here is a list of content sliders: http://visionwidget.com/inspiration/web/295-jquery-content-sliders.html
I have used and like: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider